使用swiper如何改变滑动内容（详细教程）

来源：动视网责编：小采时间：2020-11-27 19:38:19

使用swiper如何改变滑动内容（详细教程）

使用swiper如何改变滑动内容（详细教程）:假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1body下面添加如下代码<p class=&qu

推荐度：

点击下载本文 文档为doc格式

导读使用swiper如何改变滑动内容（详细教程）:假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1body下面添加如下代码<p class=&qu

假设当前显示的是1，往左滑动一个递减1，往右滑动一个递增1。下面通过实例代码给大家讲解swiper动态改变滑动内容的实现方法，感兴趣的朋友一起看看吧

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

body下面添加如下代码

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

引用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;
 },
 },
})

初始值：