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 相关文章推荐
JAVASCRIPT HashTable
Jan 22 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
JavaScript实现三阶幻方算法谜题解答
Dec 29 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
jQuery 如何给Carousel插件添加新的功能
Apr 18 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
Oct 12 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
jQuery plugin animsition使用小结
Sep 14 jQuery
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
JavaScript实现随机点名程序
Mar 25 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
对squid中refresh_pattern的一些理解和建议
2009/04/17 PHP
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
Prototype源码浅析 String部分(四)之补充
2012/01/16 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
微信小程序scroll-view实现滚动穿透和阻止滚动的方法
2018/08/20 Javascript
详解JavaScript中分解数字的三种方法
2021/01/05 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
python基础教程项目二之画幅好画
2018/04/02 Python
使用pandas对矢量化数据进行替换处理的方法
2018/04/11 Python
python获取服务器响应cookie的实例
2018/12/28 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
质检部职责
2013/12/28 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
会计专业导师推荐信
2014/03/08 职场文书
趣味运动会广播稿
2014/09/13 职场文书
Nginx配置Https安全认证的实现
2021/05/26 Servers