关于swiper的使用方法_swiper使用

由于每次自己使用swiper脑袋都像死机一样搞忘swiper这个到底怎样使用，于是决定自己写一个文章记录一下使用过程，欢迎大家指出不足哦

关于什么是swiper

官网的定义是这样的：

Swiper常用于移动端网站的内容触摸滑动

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。

Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。

Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！

关于下载

进入官网点击这个下载就行

下载后将需要的 min.css main.js 放到自己相应的文件夹就行了

也可以在项目中使用npm cnpm 来下载哦

关于如何使用swiper

首先，下载好swiper后，在相应的地方引入包

我是在总的html文件里先全部引入需要的 css和 js 文件

这里注意尽量引用带“min” 的，占用内存少一点吧

第二步，进入swiper官网，找到自己想要的轮播图效果

点击导航栏的“在线演示”，在里面找到自己想要的轮播图效果，在其右上角有个红色小字“在新窗口打开”点击它！进入那个页面就可以看到该轮播图的演示效果

第三步，鼠标右击 ——“查看源代码”

大概就是这样，具体内容根据你选的那个有所不同

在源代码里找到——<!--swiper-->

前面的代码可以不管

找到<!--swiper-->下面的就直接复制粘贴到相应的需要轮播图的html文件位置，注意类名不要更改！！！里面的内容可以相应地改为你需要的图片

可以把这一段全部粘贴到html文档，但是为了后期更好维护，wo就选择了单独写在js 文件中

关于index.js

这里的index.js中，一开始直接复制源文档中的部分发现不起作用，于是给了一个事件监听（具体原理大概理解一点，不知道对不对，有大神知道可以评论给大家讲解一下~~）

好啦，大概就是这样啦，下次再忘了就过来看！!