swiper监听滚动条_swiper Scrollbar滚动条组件详解
本文实例为大家分享了swiper Scrollbar滚动条组件的具体代码,供大家参考,具体内容如下
1、scrollbar
为Swiper增加滚动条。类型:object。
2、el
scrollbar容器的css选择器或HTML元素。类型:string/HTML Element,默认:.swiper-scrollbar。
3、hide
滚动条是否自动隐藏。类型:boolean,默认:true(会自动隐藏),false(不会自动隐藏)。
4、draggable
设置为true时允许拖动滚动条。类型:boolean,默认:false。
5、snapOnRelease
设置为false,释放滚动条时slide不会自动切合。类型:boolean,默认:true。
6、dragSize
设置滚动条指示尺寸。默认:auto自动,或者设置为num(px)。类型:string/number。
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
draggable: false,
snapOnRelease: true,
dragSize: 20,
}
})
7、mySwiper.scrollbar.el
获取滚动条的HTML元素,还可以通过$el获取DOM7。
8、mySwiper.scrollbar.dragEl
获取滚动条指示条的HTML元素,还可通过$dragEl获取DOM7。
9、mySwiper.scrollbar.updateSize()
更新滚动条。
swiper-scrollbar滚动条组件
.swiper-container{
width: 500px;
height: 214px;
margin-bottom: 10px;
}
.swiper-slide{
text-align: center;
line-height: 214px;
font-size: 80px;
color: #fff;
}
var mySwiper = new Swiper('.swiper-container',{
scrollbar: {
el: '.swiper-scrollbar',
hide: true,
draggable: false,
snapOnRelease: true,
dragSize: 20,
}
})
mySwiper.scrollbar.$el.css('height','6px');
mySwiper.scrollbar.$dragEl.css('background','#fff');
mySwiper.scrollbar.updateSize();
注:swiper.min.css,swiper.min.js文件直接上Swiper官网下载。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
swiper监听滚动条_swiper Scrollbar滚动条组件详解相关推荐
- swiper 自定义分页器显示_Swiper自定义分页器使用详解
Swiper自定义分页,供大家参考,具体内容如下 最终实现效果图: HTML DEMO(官网例子) Slide 1 Slide 2 Slide 3 1.设置导航按钮 注:Sweiper 的导航按钮及其 ...
- 监听element-ui的Calendar 日历组件的上一月 今天 下一月
监听element-ui的Calendar 日历组件的上一月 今天 下一月 直接在mounted(){}里面进行监听 代码如下: mounted() {let prevBtn = document.q ...
- Tkinter 组件详解(九):Scrollbar
Tkinter 组件详解之Scrollbar Scrollbar(滚动条)组件用于滚动一些组件的可见范围,根据方向可分为垂直滚动条和水平滚动条.Scrollbar 组件常常被用于实现文本.画布和列表框 ...
- Tkinter组件详解(五):Listbox和Scrollbar
Tkinter组件详解之Listbox Listbox(列表框)组件用于显示一个选择列表.Listbox 只能包含文本项目,并且所有的项目都需要使用相同的字体和颜色.根据组件的配置,用户可以从列表中选 ...
- 【Unity3D-UGUI系列】(十二)ScrollView 滚动视图组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
- Tkinter 组件详解(七):Entry
Tkinter 组件详解之Entry Entry(输入框)组件通常用于获取用户的输入文本. 何时使用 Entry 组件? Entry 组件仅允许用于输入一行文本,如果用于输入的字符串长度比该组件可显示 ...
- Tkinter 组件详解(十):Scale
Tkinter 组件详解之Scale Scale(刻度)组件看起来像是一个带数据的 Scrollbar(滚动条)组件,但事实上它们是不同的两个东东.Scale 组件允许用于通过滑动滑块来选择一个范围内 ...
- Tkinter 组件详解(八):Listbox
Tkinter 组件详解之Listbox Listbox(列表框)组件用于显示一个选择列表.Listbox 只能包含文本项目,并且所有的项目都需要使用相同的字体和颜色.根据组件的配置,用户可以从列表中 ...
- 【Unity3D-UGUI系列】(一)Canvas 画布组件详解
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享 简书地址 我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉 ...
最新文章
- node-webkit教程(16)调试typescript
- vue 如何生成一个dom元素_vue 学习心得——DOM树如何被构建
- 数学建模第三节2020.4.17-5.3补
- web前端技术分享:详解模块化require 和 import的区别
- 解析单句sql_SqlParser 一个利用正则表达式解析单句SQL的类
- OpenStack Trove2
- 【毕业答辩】毕业论文答辩有技巧!
- 程序如何在两个gpu卡上并行运行_【他山之石】如何支撑上亿类别的人脸训练?显存均衡的模型并行(PyTorch实现)...
- matlab遗传算法工具箱及应用 pdf,MATLAB遗传算法工具箱及应用(雷英杰)
- (matlab代码)绘制地震记录的F-K谱
- Android音视频开发入门(一)
- 在win10系统中应用iverilog(Icarus verilog)学习笔记
- 试验Windows Embedded Standard 7 Service Pack 1 Evaluation Edition
- 远程访问及控制SSH
- SOC计算方法:电流积分+开路电压
- FSL之bet颅骨剥离
- SpringBoot中集成Redis实现对redis中数据的解析和存储
- Android App实战项目之实现手写签名APP功能(附源码,简单易懂 可直接实用)
- 共阳数码管段码表_正点原子开拓者FPGA开发板资料连载第十一章 静态数码管显示实验...
- 201671010444 夏向明 实验四附加实验
热门文章
- java 安卓权限_java – Android运行时权限 – 如何实现
- 俄罗斯、乌克兰程序员薪资大曝光:年薪普遍 15w+,女程序员比男程序员收入高?
- 阿里正在研发无人卡车;《王者荣耀》皮肤个性动作涉嫌抄袭致歉;​苹果泄露女生私密照赔偿数百万美元|极客头条...
- 六招制敌,搞定 core dump 问题
- 方法不对,啥都学不会!90%的Python工程师都输在这点上!
- 优酷爱奇艺回应被处罚;拼多多主体公司法定代表人变更,黄峥退出董事席位;斗鱼发布开源框架Jupiter | 极客头条
- 微软、苹果、谷歌、三星……这些区块链中的科技巨头原来已经做了这么多事!...
- 云原生开发环境初探 | CSDN 博文精选
- 听说有了华为分布式技术,开发者能够一人顶三人?
- 计算力就是你的核心业务!