Swiper插件 实现轮播图

js插件实现轮播图

下面我以轮播图为例

下载就不说了，自行去官网下载即可。

第一：引入css文件和js文件。

    <!-- 引入swipercss文件 -->
    <link rel="stylesheet" href="css/swiper.min.css">
    <!-- 引入swiper js 文件 -->
    <script src="js/swiper.min.js"></script>

准备工作做好了，就去选个轮播图的效果吧。 可以从里面选择一个想要的效果，这里我选择编号为145的轮播图。

 

第二：选择好效果后，去自己下载的文件包中，找到对应编号的demo页面。打开后，右边检查源码，就可以看到轮播图的源码了。

看源码我们主要是去复制它里面的结构、样式以及轮播图的初始化部分。