本文实例为大家分享了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()
更新滚动条。
<!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="/UploadFiles/2021-04-02/swiper.min.js">注:swiper.min.css,swiper.min.js文件直接上Swiper官网下载。
参考Swiper API文档
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[D
- 明达年度发烧碟MasterSuperiorAudiophile2017[D
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WA
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][5
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量