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 相关文章推荐
IE与Firefox在JavaScript上的7个不同写法小结
Sep 14 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
分享10个原生JavaScript技巧
Apr 20 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
学习JavaScript设计模式之责任链模式
Jan 18 Javascript
JS常用函数和常用技巧小结
Oct 15 Javascript
BootStrap tab选项卡使用小结
Aug 09 Javascript
JavaScript实现左侧菜单效果
Dec 14 Javascript
layui select动态添加option的实例
Mar 07 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
关于对TypeScript泛型参数的默认值理解
Jul 15 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
php弹出对话框实现重定向代码
2014/01/23 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
JQUERY的属性选择符和自定义选择符使用方法(二)
2011/04/07 Javascript
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
2015/11/02 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
2016/06/28 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue element 生成无线级左侧菜单的实现代码
2019/08/21 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
关于Js中new操作符的作用详解
2021/02/21 Javascript
Python ZipFile模块详解
2013/11/01 Python
开始着手第一个Django项目
2015/07/15 Python
Python使用cx_Oracle调用Oracle存储过程的方法示例
2017/10/07 Python
python 实现登录网页的操作方法
2018/05/11 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
升国旗演讲稿
2014/09/05 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
童年读书笔记
2015/06/26 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
Mongo服务重启异常问题的处理方法
2021/07/01 MongoDB