swiper 点击事件

最新推荐文章于 2024-01-23 16:51:24 发布

牧羊人_sj

最新推荐文章于 2024-01-23 16:51:24 发布

阅读量985

点赞数 1

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_59347596/article/details/129990649

版权

文章展示了在swiper版本5.4.5和vue-awesome-swiper3.1.3的环境下，如何设置swiper选项以实现垂直方向的自动播放和循环滑动。同时，通过点击事件监听，分别在循环和非循环模式下获取当前滑动的下标，分别是`realIndex`和`clickedIndex`。

摘要由CSDN通过智能技术生成

点击swiper 获取当前下标 两种模式 

"swiper": "^5.4.5", "vue-awesome-swiper": "^3.1.3",
 swiperOption: {
        autoplay: { delay: 3000 },
        loop: true, //循环
        slidesPerView: 'auto',
        direction: "vertical",
        disableOnInteraction: true,
        preventLinksPropagation: false,
        on: {
          click: () => {
            console.log(this.$refs.swiperRef.swiper.realIndex);           
          },
        }
      },
 swiperOption: {
        autoplay: { delay: 3000 },
        loop: false, //不循环
        slidesPerView: 'auto',
        direction: "vertical",
        disableOnInteraction: true,
        preventLinksPropagation: false,
        on: {
          click: () => {
              console.log(this.$refs.swiperRef.swiper.clickedIndex);           
          },
        }
      },