脚本宝典收集整理的这篇文章主要介绍了轮播图（swiper），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

JS插件

简单说就是别人写好封装好的代码，我们可以直接拿过来用的。之前我们写的代码都是用纯js也就是原生jS写的，使用js插件来实现一些常见的功能块，是很快就能实现的，同时还缩减了我们的代码量。

1. 要想使用这个插件，首先得去官网下载需要得材料。swiPEr插件官方地址：https://www.swiper.COM.cn/api/start/new.htML。

2. 下载完毕后，新建项目，把最基础的两个文件引入到页面中

（使用node.js时在cmd命令中下载所需要的版本）

3. 引入之后，使用插件

js插件实现轮播图

第一：引入css文件和js文件。(我放入了自己的文件夹内，也可找到文件夹位置直接引入)

<script src="../public/js/swiper.min.js"></script> &nbsp;  <link rel="stylesheet" href="../public/css/swiper.min.css">

第二：在swiper官网找到轮播图HTML的代码

<div class="swiper">  <div class="swiper-wrapper">    <div class="swiper-slide">slider1</div>    <div class="swiper-slide">slider2</div>    <div class="swiper-slide">slider3</div>  </div></div><script>VAR mySwiper = new Swiper('.swiper', {    autoplay: true,//可选选项，自动滑动})​//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例new Swiper('.swiper')var mySwiper = document.querySelector('.swiper').swipermySwiper.slideNext();</script>

第三：选择自己想要的内容

前进后退按钮、分页器等在swiper官网都能找到代码

脚本宝典总结

以上是脚本宝典为你收集整理的轮播图（swiper）全部内容，希望文章能够帮你解决轮播图（swiper）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。