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

最新推荐文章于 2023-11-01 16:59:50 发布

蚂蚁上的大象

最新推荐文章于 2023-11-01 16:59:50 发布

阅读量1.6w

点赞数 5

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Jensen_Yao/article/details/79289592

版权

JavaScript 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

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

});

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

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