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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
在JavaScript中监听IME键盘输入事件
May 29 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
js相册效果代码(点击创建即可)
Apr 16 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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
图书管理程序(二)
2006/10/09 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php简单日历函数
2015/10/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
JS.elementGetStyle(element, style)应用示例
2013/09/24 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
2014/01/28 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
JS获取IE版本号与HTML设置IE文档模式的方法
2016/10/09 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
Vue打包后访问静态资源路径问题
2019/11/08 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python新手实现2048小游戏
2015/03/31 Python
Python 基础教程之闭包的使用方法
2017/09/29 Python
Python yield与实现方法代码分析
2018/02/06 Python
python批量获取html内body内容的实例
2019/01/02 Python
python 格式化输出百分号的方法
2019/01/20 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
基于python实现操作redis及消息队列
2020/08/27 Python
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
Carolina工作鞋官网:Carolina Footwear
2019/03/14 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
煤矿安全承诺书
2014/05/22 职场文书
2014迎国庆标语大全
2014/09/19 职场文书
作风建设年度心得体会
2014/10/29 职场文书
中学生学习保证书
2015/02/26 职场文书
体育教师教学随笔
2015/08/15 职场文书