swiper是纯javaScript打造的滑动特效插件，面向手机、平板电脑、移动终端；能实现触屏焦点图、触屏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
console.log(num)
}
})
