swiper隱藏後再顯示不會觸發自動播放,加loop導致播放不正常
阿新 • • 發佈:2019-02-02
程式碼:點選huanj這個ul再顯示swiper-container,預設swiper-container是隱藏的
..................................css...............................
.container{
width:96%;
margin:2% auto;
position: relative;
display:none;
}
...................................頁面.........................
<ul class="huanj">
<li><img src="/images/xueda/hj1.jpg"></li><li><img src="/images/xueda/hj3.jpg"></li>
<li><img src="/images/xueda/hj4.jpg"></li>
<li><img src="/images/xueda/hj5.jpg"></li>
<li><img src="/images/xueda/hj6.jpg"></li>
</ul>
<div class="container re1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/images/xueda/hj1.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj3.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj4.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj5.jpg"></div>
<div class="swiper-slide"><img src="/images/xueda/hj6.jpg"></div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<script src="/js/swiper3.07.jquery.min.js" type="text/javascript"></script>
<script>
swiper1 = new Swiper('.swiper-container', {
observer:true,//修改swiper自己或子元素時,自動初始化swiper
observeParents:true//修改swiper的父元素時,自動初始化swiper
});
</script>
.....................................................js...................................
$(".huanj").click(function(){
$(".container").show();$(".huanj").hide();
var mySwiper = new Swiper('.swiper-container', {
autoplay: 2500,
autoplayDisableOnInteraction: false,
pagination: '.swiper-pagination',
paginationClickable: true,
onSlideChangeEnd: function(swiper){
swiper.update(); //swiper更新
}
});
................................效果..................
http://xdjy.soujoin.com/xa/xueda/