一个页面多个swiper通过按钮显示隐藏出现的问题

一个页面多个swiper通过按钮显示隐藏出现的问题

2019-09-26 15:33:26 沅芯 阅读数 43更多

分类专栏： swiper轮播图

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/huayuaer/article/details/101447413

一个页面多个swiper通过按钮显示隐藏出现的问题

描述：一个页面有多个swiper，一开始都隐藏，通过点击按钮显示对应的swiper。
html部分代码：

<div class="btn">
	  <div class="btnBox">
		  <div class="button button1"></div>
		  <div class="button button2"></div>
		  <div class="button button3"></div>
		  <div class="button button4"></div>
	  </div>  
  </div>
  <div class="qie qie1">
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide" style="background-image:url(img/30.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/31.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/32.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/33.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/34.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/35.png)"></div>
		    </div>
		</div>
  </div>
  <div class="qie qie2">
		<div class="swiper-container">
		    <div class="swiper-wrapper">
		      <div class="swiper-slide" style="background-image:url(img/36.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/37.png)"></div>
		      <div class="swiper-slide" style="background-image:url(img/38.png)"></div>
		    </div>
		</div>
  </div>

js部分代码：

$(function(){
	var swiper1 = new Swiper('.qie1 .swiper-container', {
		 autoplay: 5000,
		 speed: 500,
		 loop: true,
		 observer:true, 
		 observeParents:true,
		 autoplayDisableOnInteraction : false,  //用手滑动后能继续自动轮播，默认true不轮播
	 });
	var swiper2 = new Swiper('.qie2 .swiper-container', {
		autoplay: 5000,
		speed: 500,
		loop: true,
		observer:true,
		observeParents:true,
		autoplayDisableOnInteraction : false,
	  });
	$(".qie").hide();;
	swiper1.stopAutoplay(); 
	swiper2.stopAutoplay();
	$('.button').each(function(){
		$(this).click(function(){
			var index=$(this).index();
			$('.btn').hide();
			$(".qie").hide();;
			swiper1.stopAutoplay();
			swiper2.stopAutoplay();
			$('.qie').eq(index).show();
			if(index==0){
				swiper1.startAutoplay();
			}else if(index==1){
				swiper2.startAutoplay();
			}
		})
	});
	$('.return').click(function(){
		$('.qie').hide();
		swiper1.stopAutoplay();
		swiper2.stopAutoplay();
		$('.btn').show();
	})
})()

注意：
1.关于一个页面多个swiper，在new Swiper时最好在.swiper-container前面加上对应的父级，也可以给.swiper-container在加一个class名。
2.关于显示隐藏后发现swiper不自动轮播，此问题的解决方法是同时在建swiper时加入observer:true,observeParents:true（有时候加入这两个就可以了），但这次加入后依然不能自动轮播，此时在隐藏的时候要加上swiper.stopAutoplay();显示的时候加上swiper.startAutoplay();