swiper插件简单使用

  • A+
所属分类:Web前端
摘要

开源、免费、强大的触摸滑动插件简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等


1 swiper介绍

开源、免费、强大的触摸滑动插件

简单配置即可实现手机、电脑网页大部分滑动功能,焦点图、tab、触摸导航等

比如常见轮播图就可以用这个实现

官网:https://www.swiper.com.cn/

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',