vue中swiper手动滑动后不能自动播放的解决方法

不念不忘少年蓝@ 2021-09-18 23:24 734阅读 0赞

用户操作swiper之后，是否禁止autoplay。默认为true：停止。  
如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。  
操作包括触碰，拖动，点击pagination等。

**Swiper3.x**

<script> 
      var mySwiper = new Swiper('.swiper-container',{ 
    	autoplay : 3000,
    	autoplayDisableOnInteraction : false,   // 用户操作swiper之后，是否禁止autoplay
      })
    </script>

**Vue**

<template>
      <div class="wrapper">
        <swiper :options="swiperOption">
          <swiper-slide v-for="item in swiperList">
            <img class="swiper-img" :src="item.imgUrl" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </template>
    <script>
    export default { 
      data () { 
        return { 
          swiperOption: { 
            pagination: '.swiper-pagination',
            autoplay: 2000, // 可设置数值来指定播放速度
            autoplayDisableOnInteraction: false,   // 用户操作swiper之后，是否禁止autoplay
            speed: 400,     // 切换图片速度
            loop: true      // 循环播放
          }
        }
      },
      props: ['swiperList']
    }
    </script>

**Swiper4.x**

<script> 
    var mySwiper = new Swiper('.swiper-container',{ 
      autoplay: { 
        disableOnInteraction: false,    // 用户操作swiper之后，是否禁止autoplay
      },
    })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，734人围观）

还没有评论，来说两句吧...

相关阅读

相关当点击swiper切换后，没有自动播放

在新版本是直接在autoplay里面添加 disableOninteraction:false; //true是点击swiper之后不切换（默认行为） ![在这里插入图

ゞ浴缸里的玫瑰/ 2023年03月04日 08:28/ 0 赞/ 446 阅读

相关 swiper禁止手动滑动

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b6uICDlhYk_size_20_colo

清疚/ 2022年09月15日 14:56/ 0 赞/ 300 阅读

相关 Android 解决逐帧动画不能自动播放问题

ImageView 图片逐帧动画,可参考用作登录界面,显示进度等注：ad.start();不能放在OnCreate方法里面,否则动画不会正常播放,只会停留在第一帧.应该是

Bertha 。/ 2022年06月18日 06:42/ 0 赞/ 283 阅读

相关 swiper在微信服务号中不能滑动

swiper轮播图还是蛮好用的，放到微信服务号上，发现并不能滑动，百度之，[原文][Link 1]列出几个问题；我这里是： swiper 初始化放在ajax请求回调函数

忘是亡心i/ 2022年06月10日 14:13/ 0 赞/ 197 阅读

相关 ios不能自动播放音频

对audio，利用trigger('play')在ios上不能触发audio播放，原因ios 内置浏览器safari要播放音频，需要人为去触发，或者在微信WeixinJSBri

「爱情、让人受尽委屈。」/ 2022年06月07日 00:51/ 0 赞/ 643 阅读

相关 vue-awesome-swiper组件不能自动播放和导航器小圆点不显示问题

> 折腾一个多小时，怪了，以前也是这样用的，为什么想在不行了呢？ > > 问题是使用vue-awesome-swiper组件时不能自动轮播和导航器小圆点不显示 > > 犯了

た入场券/ 2022年05月31日 23:51/ 0 赞/ 441 阅读

相关 chrome升级后audio不能播放解决

chrome报错：Uncaught (in promise) DOMException: play() failed 详情请看：[blog.csdn.net/super\_X

待我称王封你为后i/ 2022年03月16日 12:08/ 0 赞/ 644 阅读

相关 vue中swiper手动滑动后不能自动播放的解决方法

用户操作swiper之后，是否禁止autoplay。默认为true：停止。如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay

不念不忘少年蓝@/ 2021年09月18日 23:24/ 0 赞/ 735 阅读

相关 swiper手动滑动之后自动轮播失效的解决方法

解决方法 <script> var mySwiper = new Swiper('.swiper-container',{ autoplay:

旧城等待，/ 2021年07月26日 23:44/ 0 赞/ 1093 阅读

相关 uni-app 禁止 swiper 手动滑动

我们在使用 uni-app 的滑块视图容器 swiper 时，有时候放入该容器的内容需要左右滑动（如使用 SwipeAction 滑动操作组件），这时就与 swiper ...

朱雀/ 2021年03月29日 11:50/ 1 赞/ 2672 阅读