Swiper插件 实现轮播图

写在前面 

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

看了一天的专业课，还是来写写放松放松。 emmmmmm   我还是那么水。。。。。。。

好了好了，先看看是怎么用的吧。

1. 要想使用这个插件，首先得去官网下载需要得材料。swiper插件官方地址：Swiper。

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

3. 引入之后，使用插件

 

js插件实现轮播图

下面我以轮播图为例

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

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

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

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

 

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

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

其中，css样式部分，需要复制到自己页面对应的css文件中。

轮播图的初始化可以使用script标签包裹起来直接放到body后面，也可以把它复制到一个单独的js文件中，这里我是放到单独的js文件中。  

    <!-- 引入我们自己的js文件 -->
    <script src="js/index.js"></script>

对应样式的更改，可以查Swiper官网上面的API文档。我就只把按钮换成了白色的，圆点换成白色的。

很多时候，如果看不懂文档什么意思的话，就改改试试，看看改前更改后有什么不一样的，这样就知道哪些类名可以实现哪些功能了。其实文档介绍的很清楚了，就去找自己使用的那一部分，去扒拉扒拉，点点翻翻看看就能看懂。

/* 小圆点的颜色 */
.swiper-pagination-bullet-active {
    background-color: #fff !important;
}

 

 我的js文件。

window.addEventListener('load', function () {
    var swiper = new Swiper('.swiper-container', {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        // 分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        // 按钮
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    });
})

 

看看我的效果图

 

最后奉上我的代码拉。

其实就是往结构了加图片。

        <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="upload/banner.dpg" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner1.dpg" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner2.dpg" alt="" srcset="">
                </div>
                <div class="swiper-slide">
                    <img src="upload/banner3.dpg" alt="" srcset="">
                </div>
            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
            <!-- Add Arrows -->
            <!-- 白色的按钮 swiper-button-white-->
            <div class="swiper-button-next swiper-button-white"></div>
            <div class="swiper-button-prev swiper-button-white"></div>
        </div>