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 相关文章推荐
一个小型js框架myJSFrame附API使用帮助
Jun 28 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JSON取值前判断
Dec 23 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
js获取及判断键盘按键的方法
Dec 01 Javascript
字符串反转_JavaScript
Apr 28 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
Sep 20 Javascript
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
Dec 12 Javascript
微信小程序进入广告实现代码实例
Sep 19 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
dedecms中显示数字验证码的修改方法
2007/03/21 PHP
php Undefined index的问题
2009/06/01 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
php邮箱地址正则表达式验证
2015/11/13 PHP
Yii 2.0如何使用页面缓存方法示例
2017/05/23 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
JS中彻底删除JSON对象组成的数组中的元素
2020/09/22 PHP
常用js脚本
2006/12/03 Javascript
用脚本调用样式的几种方法
2006/12/09 Javascript
javascript 写类方式之三
2009/07/05 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jQuery EasyUI API 中文文档 - Panel面板
2011/09/30 Javascript
javascript实用小函数使用介绍
2013/11/11 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
javacript获取当前屏幕大小
2016/06/04 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
angularjs性能优化的方法
2018/09/05 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python搜索指定目录的方法
2015/04/29 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
详解python3中的真值测试
2018/08/13 Python
Python numpy.zero() 初始化矩阵实例
2019/11/27 Python
Python面向对象中类(class)的简单理解与用法分析
2020/02/21 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
自我评价是什么
2014/01/04 职场文书
周年庆典邀请函范文
2014/01/23 职场文书
放射科岗位职责
2015/02/14 职场文书
后勤工作个人总结
2015/02/28 职场文书
大学毕业典礼致辞
2015/07/29 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python