- A+
所属分类：Web前端
1 swiper介绍
开源、免费、强大的触摸滑动插件
简单配置即可实现手机、电脑网页大部分滑动功能，焦点图、tab、触摸导航等
比如常见轮播图就可以用这个实现
swiper3地址：https://3.swiper.com.cn/
这里总结swiper3版本的简单使用方法
2 使用
2.1 下载swiper
https://3.swiper.com.cn/download/index.html
2.2 使用
- 首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。
<!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="path/to/swiper.min.css"> </head> <body> ... <script src="path/to/swiper.min.js"></script> </body> </html> - HTML内容。把
Slide 1到3换成img标签即可实现轮播图
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!-- 如果需要滚动条 --> <!-- <div class="swiper-scrollbar"></div>--> </div> 导航等组件可以放在container之外 - 初始化Swiper：最好是挨着标签(其实就是页面加载完成后加载)
<script> var mySwiper = new Swiper ('.swiper-container', { //direction: 'vertical',默认是垂直方向 loop: true,//循环滚动 // 如果需要分页器 pagination: '.swiper-pagination', // 如果需要前进后退按钮 nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', // 如果需要滚动条 //scrollbar: '.swiper-scrollbar', }) </script> 注意：如果不想使用某个功能,需要将对应的html和js的内容都删掉(注释掉),否则可能会报错.
比如：不想要滑动条这个功能需要将下面两段代码删掉,注意要同时删掉。
html
<div class="swiper-scrollbar"></div> js
scrollbar: '.swiper-scrollbar', 
