swiper动态改变滑动内容的实现方法


Posted in Javascript onJanuary 17, 2018

假设当前显示的是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;
  },
 },
})

初始值:

swiper动态改变滑动内容的实现方法

往左滑动三次:

swiper动态改变滑动内容的实现方法

往右滑动一次

swiper动态改变滑动内容的实现方法

做这个测试主要为了后面日历的左右滑动改变上一月下一月

总结

以上所述是小编给大家介绍的swiper动态改变滑动内容的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
Jan 07 Javascript
jQuery实现div浮动层跟随页面滚动效果
Feb 11 Javascript
js简单实现点击左右运动的方法
Apr 10 Javascript
jQuery聚合函数实例
May 21 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
Aug 14 Javascript
原生JS实现日历组件的示例代码
Sep 22 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
vuex的module模块用法示例
Nov 12 Javascript
VUE脚手架具体使用方法
May 20 Javascript
浅谈vue中使用编辑器vue-quill-editor踩过的坑
Aug 03 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
Jan 17 #Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 #Javascript
angularjs 页面自适应高度的方法
Jan 17 #Javascript
VueJs监听window.resize方法示例
Jan 17 #Javascript
详解AngularJS之$window窗口对象
Jan 17 #Javascript
React-native桥接Android原生开发详解
Jan 17 #Javascript
vue自定义指令directive实例详解
Jan 17 #Javascript
You might like
图解上海144收音机
2021/03/02 无线电
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
js实现checkbox全选和反选示例
2014/05/01 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
Python的print用法示例
2014/02/11 Python
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Python基础入门之seed()方法的使用
2015/05/15 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
python中的计时器timeit的使用方法
2017/10/20 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
Python爬虫beautifulsoup4常用的解析方法总结
2019/02/25 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
本科毕业生求职信
2014/06/15 职场文书
大学生标准自荐书
2014/06/15 职场文书
地震捐款简报
2015/07/21 职场文书
500字作文之关于爸爸
2019/11/14 职场文书
导游词之淮安明祖陵
2019/11/25 职场文书
python中 .npy文件的读写操作实例
2022/04/14 Python