swiper的基础教程(十二)
来源:互联网 发布:java自定义泛型类 编辑:程序博客网 时间:2024/04/30 03:16
本节内容介绍swiper当中如何将导航变为滚动条样式。
首先我们搭建一个swiper页面的基本布局。
首先我们搭建一个swiper页面的基本布局。
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">H5EDU 1<img src="logo.png"></div> <div class="swiper-slide">H5EDU 2<img src="logo.png"></div> <div class="swiper-slide">H5EDU 3<img src="logo.png"></div> <div class="swiper-slide">H5EDU 4<img src="logo.png"></div> <div class="swiper-slide">H5EDU 5<img src="logo.png"></div> <div class="swiper-slide">H5EDU 6<img src="logo.png"></div> <div class="swiper-slide">H5EDU 7<img src="logo.png"></div> <div class="swiper-slide">H5EDU 8<img src="logo.png"></div> <div class="swiper-slide">H5EDU 9<img src="logo.png"></div> </div> <div class="swiper-scrollbar"></div> </div>然后到JS部分添加初始化代码。
var swiper = new Swiper('.swiper-container',{ spaceBetween:30, grabCursor:true, slidesPerView:3, centeredSlides:true, scrollbar:'.swiper-scrollbar', //绑定分页导航 scrollbarHide:true //开启导航在不活动时的隐藏 });可以注意到在本篇当中将分页导航的swiper-container改变为swiper-scrollbar,然后在初始化当中绑定导航。就可以实现了。当然,可以关闭导航条的隐藏效果
0 0
- swiper的基础教程(十二)
- swiper的基础教程(十二)
- swiper的基础使用(十二)
- swiper的基础使用(二十二)
- swiper的使用(一)
- swiper的使用(一)
- swiper教程--swiper的基础使用(十九)
- swiper教程——swiper的基础使用(十九)
- swiper教程--swiper的基础使用(二十)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(一)
- swiper的基础使用(二)
- swiper的基础使用(三)
- swiper的基础使用(四)
- swiper的基础使用(五)
- swiper的基础使用(六)
- 中国剩余定理学习小结
- Android--从零单排系列(7)--广播的使用和利用广播进行数据的传递
- block动画、排序、ASI请求(六)
- html 笔记---基本组成 元素
- JVM常用参数
- swiper的基础教程(十二)
- Perl文件测试
- 测试测试
- Oracle入门学习(6)
- getSupportFragmentManager()未声明
- swiper的基本使用(十三)
- TOJ 1765. Longest Ordered Subsequence
- TP3.2.3 导出Excel
- TortoiseSVN 合并操作简明教程