【解决 swiper轮播图设置自动轮播，手动滑动后，不再自动轮播

王小王和他的小伙伴

已于 2023-03-29 17:19:09 修改

阅读量1.8k

点赞数

分类专栏： vue2 vue3 通用项目文章标签： javascript 前端 html

于 2023-03-28 16:07:27 首次发布

本文链接：https://blog.csdn.net/weixin_55042716/article/details/129818349

版权

vue2 vue3 通用项目专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章展示了如何在Swiper组件中设置`disableOnInteraction:false`，以允许循环播放（loop:true）和自动播放（autoplay）在用户交互时继续运行。每个滑块显示4个视图，内容包含使用`v-for`循环渲染的图片。

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

**设置 disableOnInteraction: false **

<swiper
      class="swiperWheel_table"
      :modules="modules"
      :loop="true"
      :autoplay="{ disableOnInteraction: false }"
      :slides-per-view="4"
    >
    <swiper-slide v-for="(item, index) in swiperImgs" :key="index">
         <img :src="item.url" alt="" />
    </swiper-slide>
 </swiper>