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类的定义
Jun 28 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
Jul 06 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
JS获取当前地理位置的方法
Oct 25 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
JQuery animate动画应用示例
May 14 jQuery
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
详细分析Node.js 模块系统
Jun 28 Javascript
在VUE中使用lodash的debounce和throttle操作
Nov 09 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
smarty内置函数foreach用法实例
2015/01/22 PHP
Laravel 5 学习笔记
2015/03/06 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
深入浅析php json 格式控制
2015/12/24 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
2020/12/31 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
2020/11/16 Javascript
Python os模块介绍
2014/11/30 Python
详解C++编程中一元运算符的重载
2016/01/19 Python
Python设计模式之享元模式原理与用法实例分析
2019/01/11 Python
Python数据类型之List列表实例详解
2019/05/08 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
高中自我鉴定范文
2013/11/03 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
高考励志标语
2014/06/05 职场文书
车辆年检委托书范本
2014/10/14 职场文书
2016年9月份红领巾广播稿
2015/12/21 职场文书