swiper Scrollbar滚动条组件详解


Posted in Javascript onSeptember 08, 2019

本文实例为大家分享了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。

<script>
var mySwiper = new Swiper('.swiper-container',{
 scrollbar: {
 el: '.swiper-scrollbar',
 hide: true,
 draggable: false,
 snapOnRelease: true,
 dragSize: 20,
 }
})
</script>

7、mySwiper.scrollbar.el

获取滚动条的HTML元素,还可以通过$el获取DOM7。

8、mySwiper.scrollbar.dragEl

获取滚动条指示条的HTML元素,还可通过$dragEl获取DOM7。

9、mySwiper.scrollbar.updateSize()

更新滚动条。

swiper Scrollbar滚动条组件详解

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>swiper-scrollbar滚动条组件</title>
 <link rel="stylesheet" href="css/swiper.min.css" >
 <style>
 .swiper-container{
 width: 500px;
 height: 214px;
 margin-bottom: 10px;
 }
 .swiper-slide{
 text-align: center;
 line-height: 214px;
 font-size: 80px;
 color: #fff;
 }
 </style>
</head>
 
<body>
 <div class="swiper-container">
 <div class="swiper-wrapper">
 <div class="swiper-slide" style="background: #FF8604">slide1</div>
 <div class="swiper-slide" style="background: #4390EE">slide2</div>
 <div class="swiper-slide" style="background: #CA4040">slide3</div>
 </div>
 <div class="swiper-scrollbar"></div>
 </div>
 
 <script src="js/swiper.min.js"></script>
 <script>
 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();
 </script>
 
</body>
</html>

注:swiper.min.css,swiper.min.js文件直接上Swiper官网下载。

参考Swiper API文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
推荐20家国外的脚本下载网站
Apr 28 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
jquery.messager.js插件导致页面抖动的解决方法
Jul 14 Javascript
JS+CSS实现简单的二级下拉导航菜单效果
Sep 21 Javascript
微信小程序学习(4)-系统配置app.json详解
Jan 12 Javascript
react.js CMS 删除功能的实现方法
Apr 17 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
Sep 30 Javascript
webpack4+react多页面架构的实现
Oct 25 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
微信小程序实现签字功能
Dec 23 Javascript
使用vue-cli3+typescript的项目模板创建工程的教程
Feb 28 Javascript
js实现移动端tab切换时下划线滑动效果
Sep 08 #Javascript
swiper4实现移动端导航切换
Oct 16 #Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 #Javascript
vue实现抖音时间转盘
Sep 08 #Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 #Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 #Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
2010/12/02 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
js数组依据下标删除元素
2015/04/14 Javascript
JQuery中Text方法用法实例分析
2015/05/18 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
AngularJS指令与控制器之间的交互功能示例
2016/12/14 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
vue.js内部自定义指令与全局自定义指令的实现详解(利用directive)
2017/07/11 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
浅谈React Native Flexbox布局(小结)
2018/01/08 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
2019/07/16 Javascript
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python程序员面试题 你必须提前准备!
2018/01/16 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
利用python汇总统计多张Excel
2020/09/22 Python
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
英国健身超市:Fitness Superstore
2019/06/17 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
经济管理毕业生求职信
2014/03/15 职场文书
交通事故协议书范文
2014/04/16 职场文书
欠条样本
2015/07/03 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技