如何获取swiper前页索引值与内容
当我们左右滑动页面的时候，需要获取swiper active当前页的索引值或者内容，在swiper3.4.2等旧版和现在的swiper4.0.1等新版是不一样的，要分开进行学习，主要是slideChange事件不一样，下面看本人制作的swiper教程。
html内容如下，例如。
<div class="swiper-container"> <!-- 添加一个slide --> <div class="swiper-wrapper"> <!-- Slides --> <div class="swiper-slide">Slide 1<img src="xxxx.png"></div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div>
当我们用swiper滑动界面的时候，我们需要获取当前active页面的索引值与内容，也可以获取下面标签的内容，例如img标签，索引值从0开始计数，先看看swiper旧版的实现方式。
//初始化
var mySwiper = new Swiper (.swiper-container, {
// 水平的
direction: horizontal,
loop: false,
//主要看以下部分
onSlideChangeEnd : function(swiperHere) {
//获取下面的img图片
var imgurl = $(.swiper-slide-active img).attr("src");
//获取内容文本
var txt = $(.swiper-slide-active).html();
console.log("内容："+txt+"===索引值："+swiperHere.activeIndex+"===图片地址："+imgurl);
}
})
swiper4.0.1新版的slideChange事件有点不一样，使用了“on”来绑定事件，如下。
//初始化
var mySwiper = new Swiper (.swiper-container, {
// 水平显示
direction: horizontal,
loop: false
})
//主要是这部分
mySwiper.on(slideChangeTransitionEnd, function () {
var imgurl = $(.swiper-slide-active img).attr("src");
var txt = $(.swiper-slide-active).html();
console.log("内容："+txt+"===索引值："+mySwiper.activeIndex+"===图片地址："+imgurl);
});
下面就需要你们自己动手去测试了，祝你好运！骚年！
--------------------------------------------------------------- END ------------------------------------------------------------------
