swiper滑动触发事件调用不同方法
文章描述：
swiper滑动触发事件调用不同方法，到达不同效果
<div class="container">
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide blue-slide">Slide 1</div>
<div class="swiper-slide red-slide">Slide 2</div>
<div class="swiper-slide orange-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
</div>
<!-- Swiper -->
</div>.container{ height:300px; margin-top:100px;}
.swiper-container{ height:300px;}
.swiper-slide{ font-size:50px; color:#fff; text-align:center; line-height:300px;}
.blue-slide{background: #4390EE;}
.red-slide{background: #CA4040;}
.orange-slide{ background:orangered;}var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onSlideChangeEnd: function(swiper){
alert(swiper.activeIndex) //切换结束时，告诉我现在是第几个slide
}
})var mySwiper = new Swiper('.swiper-container', {
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
onSlideChangeEnd: function (swiper) {
alert(swiper.activeIndex);
if (swiper.activeIndex == 0) {
a();
} else if (swiper.activeIndex == 1) {
b();
}
}
})
function a() {
console.log("aaa");
}
function b() {
console.log("bbb");
}
发布时间：2022/10/13
发表评论