swiper插件简单使用

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>

 scrollbar: \'.swiper-scrollbar\',