slideTo切换后不触发slideChangeTransitionEnd事件
以下为全部代码：
<div class="" style="height: 50%;">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">
<img src="public/static/imgs/banner@2x.png" />
</div>
<div class="swiper-slide red-slide">
<img src="public/static/imgs/banner@2x.png" />
</div>
<div class="swiper-slide orange-slide">
<img src="public/static/imgs/banner@2x.png" />
</div>
<div class="swiper-slide red-slide">
<img src="public/static/imgs/banner@2x.png" />
</div>
<div class="swiper-slide orange-slide">
<img src="public/static/imgs/banner@2x.png" />
</div>
</div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev">
<img src="public/static/imgs/left@2x.png" />
</div>
<div class="swiper-button-next">
<img src="public/static/imgs/right@2x.png" />
</div>
<style type="text/css">
.swiper-pagination span>img{
width: 1rem!important;
max-width: 1rem;
}
</style>
<div class="swiper-pagination">
<span class="active"><img src="public/static/imgs/icon_active@2x.png" /></span>
<span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>
<span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>
<span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>
<span class=""><img src="public/static/imgs/icon_active@2x.png" /></span>
<!-- <span><img src="public/static/imgs/icon_back@2x.png" /></span> -->
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {
loop: true,
loopAdditionalSlides:5,
autoplay: {
delay: 30000,//1秒切换一次
},// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
type:'custom',
},
mousewheel:true,
on: {
init: function(swiper){
$(swiper.el).find(".swiper-pagination>span").each(function(index){
$(this).click(function(){
swiper.slideTo(index, 1000, false);//切换到第一个slide，速度为1秒
});
});
},
slideChangeTransitionEnd: function() {
var select=this.activeIndex%5;
$(this.el).find(".swiper-pagination>span").each(function(index){
if(select==index){
$(this).css("opacity","1");
}else{
$(this).css("opacity","0.3");
}
});
}
}
});
</script>
</div>
slideTo(index, speed, runCallbacks)
第三个参数设置为false时不会触发transition回调函数
页:
[1]