如何获取swiper前页索引值与内容

当我们swiper左右滑动页面的时候,需要获取swiper active当前页的索引值或者内容,在swiper3.4.2等旧版和现在的swiper4.0.1等新版是不一样的,要分开进行学习,主要是slideChange事件不一样,下面看本人制作的swiper教程。

html内容如下,例如。


 
 
  
  Slide 1
  Slide 2
  Slide 3
 

当我们用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);

});

下面就需要你们自己动手去测试了,祝你好运!骚年!

喜欢博主的可以点赞关注一下

如何获取swiper前页索引值与内容_第1张图片

---------------------------------------------------------------   END   ------------------------------------------------------------------

你可能感兴趣的:(JavaScript)