swiper动态改变滑动内容
假设当前显示的是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时都是写的数据,按照官网上介绍直接初始化swiper,随便丢一个地方初始化就ok了,但是在很多需求中,我们都需要动态的改变数据,这样可能就会 ...
- jquery动态改变元素内容
● text() - 设置或返回所选元素的文本内容 ● html() - 设置或返回所选元素的内容(包括 HTML 标记) ● val() - 设置或返回表单字段的值(只针对表单或者输入框)
- Vue如何实现swiper左右滑动内容区控制导航tab同时切换高亮
Vue如何实现左右滑动内容区控制导航tab同时切换高亮,实现的效果是:点击导航按钮时内容区发生改变,左右滑动内容区时导航按钮跟随切换高亮,停留在某个内容区时刷新页面后仍然停留在当前内容区. ...
- JavaScript动态改变表格单元格内容的方法
本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格 ...
- android 动态改变listview的内容
本文模拟:点击一个按钮,为已有的listview添加一行数据 <?xml version="1.0" encoding="utf-8"?> < ...
- 超棒的JS移动设备滑动内容幻灯实现 - Swiper
来源:GBin1.com 在线演示 如果你需要一款帮助你实现手机或者移动设备上内容幻灯实现的JS类库的话 , Swiper是一个不错的选择,它不依赖于任何第三方的类库.因此体积非常小,适合运行在移动设 ...
- javascript生成表格增删改查 JavaScript动态改变表格单元格内容 动态生成表格 JS获取表格任意单元格 javascript如何动态删除表格某一行
jsp页面表格布局Html代码 <body onload="show()"> <center> <input type="text" ...
- jquery.range.js左右滑动选取数值插件,动态改变进度。
作为一个初级前端工作人员,我最近在做一个关于直播的项目,其中一个功能要求是设置延迟时间, 所以就用到了jquery.range.js这个插件.插件中设置$(".single-slider&q ...
- js 输出语句document.write()及动态改变元素中内容innerHTML的使用
操作 HTML 元素 如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法. 请使用 "id" 属性来标 ...
随机推荐
- SuperMap(无对应字段)空间属性挂接
一.数据准备 将一个没有基本属性的模型数据集和一个含有位置等属性信息的shp属性表进行挂接,两组数据之间没有连接字段,但同属一个坐标系下,只能通过空间位置信息进行属性挂接. 二.数据处理 基本思路:将 ...
- 在Eclipse平台中,搭建SpringBoot开发环境
1.查看eclipse版本号,Help->About Eclipse IDE 2.下载对应版本的STS插件 下载地址:https://spring.io/tools3/sts/all(注意版本对 ...
- jsp页面struts2标签展示clob类型的数据
直接从数据库中查出来的数据,是clob类型的在前端页面展示的时候是这样: 后来找到了一个方法,在action中添加一个方法,解析转换clob数据的方法 public String getClob(Cl ...
- python实现计算器功能
import re def strip_operate(exp): # 合并多余的操作符 exp = exp.replace("+-", "-") exp = ...
- 关于Arduino串口读写HEX
每次和硬件层进行调试的时候,就容易遇到数据格式问题.这不,继上次Matlab上的hex发送后,又遇到了Arduino上接收hex,并进行对比处理的问题.由于单片机级别的处理器只能以字节形式接收,因此无 ...
- chm 已取消到该网页的导航,打不开!
方法 11. 双击此 .chm 文件. 2. 在“打开文件安全警告”对话框,单击以清除“打开此文件前始终询问”复选框. 3. 单击“打开”. 方法 21. 右键单击该 CHM 文件,然后单击“属性”. ...
- ubuntu下安装h2数据库
1.下载h2数据库安装包 http://www.h2database.com/html/download.html 2.解压安装文件包到指定目录 3.运行sh文件 4.访问web地址: http:// ...
- package-info类解读
类不能带有public.private访问权限.package-info.java再怎么特殊,也是一个类文件,也会被编译成package-info.class,但是在package-info.java ...
- 向div添加圆角边框
初级参数:border-radius: 4px;中级参数:border-radius: 4px 6px 6px 4px;终极参数:border-radius: 5px 5px 3px 2px / 5p ...
- PHP之string之chr()函数使用
chr (PHP 4, PHP 5, PHP 7) chr - Return a specific character chr - 返回指定的字符 Description string chr ( i ...