前端插件swiper的基础使用

欢迎访问我的个人博客：http://liubofeng.com/

前端插件swiper的基础使用

很多网站都会使用轮播图，然而自己编写轮播图是一个比较繁琐的过程，在编写过程中要编写轮播图切换时间，切换按钮等等。在实际项目中要用到轮播图大可不用自己从零编写，只要会使用swiper这一款插件即可实现很多轮播特效。

官网下载swiper

进入网站https://www.swiper.com.cn/download/index.html 下载相应版本的swiper文档。
博主在这里下载的是最新版本6.8.1,如下图所示：
下好之后解压即可得到名为swiper-master的文件夹。

swiper使用

在https://www.swiper.com.cn/demo/index.html查看自己想要的轮播图效果，博主在这里演示一下怎么把如下图所示的Loop模式 / 无限循环(200)用到自己的项目中。
在刚刚解压得到文件夹中有一个demos文件夹如下图：

进入到demos文件夹，该文件夹里演示的就是官网上的效果，Loop模式 / 无限循环(200)的代号是200，在demos文件夹里找到200开头的html文件，如下图所示：
在编辑器中打开该html文件，将该文件的代码复制到自己的html文件中，这里有个要注意的点，代码引用的css文件和js文件的路径要根据自己的路径情况来修改。
复制的代码中应用的css和js是这样的：

<link rel="stylesheet" href="../package/swiper-bundle.min.css">
<script src="../package/swiper-bundle.min.js"></script>

复制的代码中的css和js文件都放在swiper-maste文件夹中的package文件夹中，将css和js文件复制到自己的项目中，然后将引用路径修改为自己存放css和js的路径即可：

<link rel="stylesheet" href="css/swiper-bundle.min.css">
<script src="js/swiper-bundle.min.js"></script>

然后运行自己的html文件就可以得到官图一样的效果了。

      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      <div class="swiper-slide">Slide 4</div>
      <div class="swiper-slide">Slide 5</div>
      <div class="swiper-slide">Slide 6</div>
      <div class="swiper-slide">Slide 7</div>
      <div class="swiper-slide">Slide 8</div>
      <div class="swiper-slide">Slide 9</div>
      <div class="swiper-slide">Slide 10</div>

将div里的元素改为自己要用于轮播的图片就可以了，博主在这里只使用了三张轮播图。

      <div class="swiper-slide"><img src="img/1.jpg" ></div>
      <div class="swiper-slide"><img src="img/2.jpg" ></div>
      <div class="swiper-slide"><img src="img/3.jpg" ></div>

如果图片规格不统一，比如有的图片尺寸大，有的尺寸小的话就可能会出现下图这样的情况：图片遮挡其他图片，或被其他图片遮挡。

可以给图片添加样式设置统一的宽高即可正常显示：

<style>
    .swiper-slide img{
      width: 80%;
      height: 80%;
    }
</style>

最后的效果放在了这里http://liubofeng.com/project/swiper-show/200-infinite-loop/
各位同学可以看看效果。
博主在这里只介绍了swiper的基本使用，没有深入介绍，想要深入了解的同学们可以看看swiper的官方api文档