swiper动态改变滑动内容

2018-06-24 01:19:01来源：未知阅读 ()

假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1

body下面添加如下代码

<div class="swiper-container temp">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            1
        </div>
        <div class="swiper-slide">
            2
        </div>
        <div class="swiper-slide">
            3
        </div>
    </div>
</div>

引用swiper的css和js脚本(当前使用的是4.x以上版本)

添加js脚本

var now_ActiveIndex=2;//,//当前所在下标
var tempSwiper = new Swiper('.swiper-container.temp', {
    initialSlide: 1,
    loop:true,
    speed:400,
    on: {
        slideChange: function(swiper){//当当前Slide切换时执行(activeIndex发生改变)
            var pre_number=Number($(this.slides[now_ActiveIndex]).text());
            if(now_ActiveIndex>this.activeIndex){
                if(now_ActiveIndex==4&&this.activeIndex==1){
                    $(this.slides[this.activeIndex]).text(pre_number);
                }else{//上一个
                    var act_number=pre_number-1;
                    $(this.slides[this.activeIndex]).text(act_number);
                }
            }else if(now_ActiveIndex<this.activeIndex){
                if(now_ActiveIndex==0&&this.activeIndex==3){
                    $(this.slides[this.activeIndex]).text(pre_number);
                }else{//下一个
                    var act_number=pre_number+1;
                    $(this.slides[this.activeIndex]).text(act_number);
                }
            }

            now_ActiveIndex=this.activeIndex;
        },
    },
})