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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
Mar 24 Javascript
javascript 随机展示头像实现代码
Dec 06 Javascript
jQuery操作input type=radio的实现代码
Jun 14 Javascript
10分钟学会写Jquery插件实例教程
Sep 06 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
微信JSAPI支付操作需要注意的细节
Jan 10 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
xmlplus组件设计系列之树(Tree)(9)
May 02 Javascript
基于ES6 Array.of的用法(实例讲解)
Sep 05 Javascript
Vue数据双向绑定底层实现原理
Nov 22 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 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
elgg 获取文件图标地址的方法
2010/03/20 PHP
PHP针对多用户实现更换头像功能
2016/09/04 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
使用隐藏的new来创建对象
2011/03/29 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
学习 NodeJS 第八天:Socket 通讯实例
2016/12/21 NodeJs
JS使用cookie实现只出现一次的广告代码效果
2017/04/22 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
基于python log取对数详解
2018/06/08 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
医生自荐信
2013/10/11 职场文书
材料物理专业大学毕业生求职信
2013/10/15 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
安全生产一岗双责责任书
2014/07/28 职场文书
投资意向书
2014/07/30 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2016年小学“公民道德宣传日”活动总结
2016/04/01 职场文书
商业计划书范文
2019/04/24 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
详细分析PHP7与PHP5区别
2021/06/26 PHP
mybatis-plus模糊查询指定字段
2022/04/28 Java/Android