當我們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);

});
 

下面就需要你們自己動手去測試了，祝你好運！騷年！