關於swiper 當前滑動值 loop:true時前後滑動值

swiper這個插件應該很多人用，今天主要說獲取當前滑動的值

https://3.swiper.com.cn/

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationType: 'fraction',
    loop: true,
    onSlideChangeEnd:function(swiper){
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
    }
});

當前滑動的值會受loop值影響

首先是loop值,默認：false

如果爲true,則開啓loop模式,會在原本slide前後複製若干個slide(默認一個)並在合適的時候切換，讓Swiper看起來是循環的

swiper.activeIndex（返回當前活動塊(激活塊)的索引。loop模式下注意該值會被加上覆制的slide數）

loop: false,
    onSlideChangeEnd:function(swiper){
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
        console.log('測試loop:false時的值----',swiper.activeIndex)
    }

當loop:true時，滑到第6個繼續滑到第一個時 打印的值是7（返回當前活動塊(激活塊)的索引。loop模式下注意該值會被加上覆制的slide數）

loop: true,
    onSlideChangeEnd:function(swiper){
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
        console.log('測試loop:true時的值----',swiper.activeIndex)
    }

this.active

this.active 在loop:false時取不到值，在true時，第一次加載取不到值，只有觸發滑動一次纔會有值，而且這種看着貌似沒什麼爲題，但是倒着滑動，取到的值就有問題了

loop: true,
    onSlideChangeEnd:function(swiper){
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
        console.log('測試loop:true時的值----',this.active)
    }

頁面第一次加載時沒值

觸發一次滑動後

this.realIndex

（當前活動塊的索引，與activeIndex不同的是，在loop模式下不會將複製的塊的數量計算在內。）

loop: true,
    onSlideChangeEnd:function(swiper){
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
        console.log('測試loop:true時的值----',this.realIndex)
    }

this.active = $('.swiper-slide-active').attr('data-swiper-slide-index') （可以完美獲取loop:true下 前後滑動當前的滑動值）

loop: true,
    onSlideChangeEnd:function(swiper){
        this.active = $('.swiper-slide-active').attr('data-swiper-slide-index')
        console.log('回調函數，swiper從一個slide過渡到另一個slide結束時執行')
        console.log('測試loop:true時的值----',this.active)
        console.log('加1的值---',Number(this.active)+1)
    }

向前滑動和向後滑動值都沒有問題，值是從0開始，要和頁面的值對應上 就要加1