多个swiper间切换,swiper-container隐藏后再显示不会触发自动播放,必须手动滑动,才能被触发自动播放
官方文档中说是加入
observer:true,
observeParents:true,
可实际并没有效果。

经过尝试,用destroy销毁Swiper后再重新初始化,完美解决了此问题。
解决代码如下:
<div class="tab">
<span>按钮一</span>
<span>按钮二</span>
<span>按钮三</span>
<span>按钮四</span>
</div>
<div class="div">
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
</div>
<script>
function swiperFn() {
return new Swiper( '.div .swiper-container', {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// .............
} )
}
var Myswiper = swiperFn()
$( ".tab" ).on( 'click', 'span', function() {
for ( var x in Myswiper ) {
Myswiper[ x ].destroy( true, true ) // 销毁Swiper
}
$( this ).addClass( 'active' ).siblings().removeClass( 'active' )
$( '.div .swiper-container' ).eq( $( this ).index() ).fadeIn( 300 ).siblings().fadeOut( 0 )
Myswiper = swiperFn()
} )
</script>又尝试了另一种办法,切换时,先停止所有的自动播放,再开启当前显示层的swiper自动播放,也能解决
<div class="tab">
<span>按钮一</span>
<span>按钮二</span>
<span>按钮三</span>
<span>按钮四</span>
</div>
<div class="div">
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
<div class="swiper-container">..............</div>
</div>
<script>
var Myswiper = Swiper( '.div .swiper-container', {
loop: true,
autoplay: {
delay: 3000,
stopOnLastSlide: false,
disableOnInteraction: false
},
// .............
} )
$( ".tab" ).on( 'click', 'span', function() {
for ( var x in Myswiper ) {
Myswiper[ x ].autoplay.stop() // 停止所有的自动播放
}
Myswiper[ $( this ).index() ].autoplay.start() // 开始自动播放
$( this ).addClass( 'active' ).siblings().removeClass( 'active' )
$( '.div .swiper-container' ).eq( $( this ).index() ).fadeIn( 300 ).siblings().fadeOut( 0 )
} )
</script>
