swiper插件的使用流程

一个简单的轮播图插件使用

1首先先在swiper官网上下载swiper

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

2下载方式的选择

直接点击最顶上的那个swiper压缩包下载即可！

03：解压swiper压缩包后，根据swiper的基础实例找到对应的demo

注意点：基础实例的demo中的代码序号和官网的序号一样，根据你的需求，查找源代码！

04：查找到需要引入的样式 CSS和JS文件

点击pageage中的css或者js文件，找到里面的压缩文件

• swiper.min.css
• swiper.min.js
• 添加到你的项目之中
  

05：添加到你的项目

根据你在官网的实例序号，在demo中找到对应的demo之后，双击打开对应的序号的轮播图等！
然后鼠标右键，查看框架源代码！

06：引入样式，和在你项目中那个使用到轮播图，于是把对应的html结构，css样式和js等添加到项目即可！

最后运行即可！

一个简单的缩略图

第一步：查找你想要的缩略图，在新窗口打开

第二步：右键查看源码

下载css和js文件

• 就是单机css这个文件，在新窗口中看到一大片的css代码，于是你直接复制下来，保存在一个css文件即可
• js同理
  
  

第四步：就是把html和css，js等引入到你的项目之中

注意点：就是你需要一个外围盒子，来对存放这个缩略图的插件
注意点2：若是需要修改样式，需要自己新添加类名，然后在进行修改，需要注意权重问题！

需求：给缩略图添加自动播放还有点击左右按钮后，还能自动播放

第一步：查找API文档

第二步：就是按照需求，寻找相对应的控件或者配置项

<script>
var mySwiper = new Swiper('.swiper-container', {
  autoplay:true,//等同于以下设置 自动播放
  /*autoplay: {
    delay: 3000,
    stopOnLastSlide: false,
    disableOnInteraction: true,
    },*/
});
</script>

注意点：就是在官网显示的autoplay:true设置是对应4.X和5.X版本的swiper，而我下载的是3.X版本的，因此需要这样设置
autoplay:1000（1000毫秒！）

第三步：针对需求，添加点击左右箭头后，还允许自动播放

autoplayDisableOnInteraction: false, //表示用户操作swiper之后，是否禁止autoplay 默认为true,因此我们设置为false即可！