如何获取swiper中当的索引值
sw iper是纯ja va Sc r ipt打造的滑动特效插件，⾯向⼿机、平板电脑、移动终端；能实现触iper是纯ja
屏焦点图、触屏teb切换、触屏多图切换。⽽且它是开源、免费、稳定、使⽤简单、功能强⼤的轻量级 移动设备触控滑块的框架 。
当然swiper的强⼤之处不仅可以做轮播，还可做切换，那么问题来了，如何读取sweiper中的索引值？
html的结构
<div class="swiper-container swiper1" >
<div class="swiper-wrapper">
<div class="swiper-slide " >按钮1</div>
<div class="swiper-slide">按钮2</div>
<div class="swiper-slide">按钮3</div>
<div class="swiper-slide">按钮4</div>
<div class="swiper-slide">按钮5</div>
</div>
</div>
<div class="swiper-container swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">我是第⼀个页⾯</div>
<div class="swiper-slide">我是第⼆个页⾯</div>
<div class="swiper-slide">我是第三个页⾯</div>
<div class="swiper-slide">我是第四个页⾯</div>
<div class="swiper-slide">我是第五个页⾯</div>
</div>
</div>
css样式
.swiper1{ width: 100%;
}
.swiper1 .swiper-slide{
height:30px;
line-height:30px;
text-align: center;
background:lightblue;
color: #fff;
border: 1px solid #ddd;
}
.swiper2 .swiper-slide{
text-align: center;
background:lightskyblue;
color: #fff;
width: 100%;
line-height: 200px;
font-size: 20px;
height: 200px;
}
js⾏为
var swiper1 = new Swiper('.swiper1', {
slidesPerView:4,
// 轻拍事件：点击slide会触发
onTap:function(){
var navIndex = swiper1.clickedIndex; // 当前点击按钮的下标
$('.swiper1 .swiper-slide').eq(navIndex).addClass('active').siblings().removeClass('active');
// 指定swiper2切换的页⾯
swiper2.slideTo(navIndex);
}
});
var swiper2 = new Swiper('.swiper2', {
/
/ 当slide开始滑动时触发的事件
onSlideChangeStart:function(){
// 获取当前滑动页的下标
actIndex = swiper2.activeIndex;
$('.swiper1 .swiper-slide').siblings().removeClass('active');
$('.swiper1 .swiper-slide').eq(actIndex).addClass('active');
swiper1.slideTo(actIndex);
},
onSlideChangeEnd:function(){
//可以读取到当前活动的下班标
var num=swiper2.activeIndex
js制作简单的焦点图效果
console.log(num)
}
})

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。