我能帮你解决一些Swiper的小问题

在使用插件的时候，请多看官方文档

Swiper官方文档：new Swiper(swiperContainer, parameters)_Swiper参数选项 用于初始化一个Swiper，返回初始化后的Swiper实例。Swiper7使用的默认容器是.swiper，Swiper6以下使用的是.swiper-container。 默认的容器类名一般不要删除，Swiper的默认样式是施加在该类名上的。 参数名 类型 是否必填 描述 swiperContainer HTMLElement or string 必选 Swiper容器的css选择器，例如 .swiper parameters object 可选 Swiper的个性化配置 一个页面中引用多个Swiper，可以给每个容器加上ID或Class区分，要保留默认的类名.swiper。 HTML div class=swiper id=swiper1..../divdiv class=swiper id=swiper2..../divdiv class=swiper id=swiper3..../div JS var swiper1 = new Swiper(#swiper1);var swiper2 = new Swiper(#swiper2);var swiper3 = new Swiper(#swiper3); https://www.swiper.com.cn/api/start/new.html

 

一、初始化不滑动？

解决：

1、检查是否正确引入swiper.min.js插件及swiper.min.css，

2、vue项目推荐使用vue-awesome-swiper3.0版本，原生html的我现在用的是v5.0;

3、检查swiper-container/swiper-wrapper/swiper-slide等标签类名是否有拼写遗漏错误的地方，导航及左右按钮的也是一样；

4.需求为自动滑动的应设autoplay: true，

推荐写法：

/*autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: true, },*/

二、swiper经隐藏后再显示左右按钮\导航功能\自动切换\手动滑动失效

1、目前百度上99%都是这个

 

正如官方文档所示，添加上面的俩属性即可。

2、很纳闷，我加上去后还是无效。。。我参考的是update的方法，在swiper显示前重新初始化一遍，如下图解释：

 

3、也可尝试将初始化实例对象函数封装成函数调用，如下：

var mySwiper

function initSwiper(){

   mySwiper=new Swiper('.swiper-container',opts)

} 

$('.btn').click(function(){

  $('.swiper_con').show()

  initSwiper()

})

4、自动切换若还不能正常轮播，则可使用swiper的方法：

mySwiper.autoplay.start()

mySwiper.autoplay.stop()

5、vue项目中，可以通过v-if=“visible”中的visible值来让你的swiper的重新初始化;

后面遇到问题再补...