轮播图插件（swiper）

今天给新手介绍一个轮播图插件——swiper

首先要引用swiper.min.css和swiper.min.js。

页面代码

<div class="swiper-container" id="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1-1</div>
            <div class="swiper-slide">Slide 1-2</div>
            <div class="swiper-slide">Slide 1-3</div>
        </div>
    </div>

初始化

var swiper = new Swiper('#swiper-container');

这是常规的，

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

初始化

var swiper = new Swiper('#swiper-container1', { 
            navigation: { 
                nextEl: '.swiper-button-next', 
                prevEl: '.swiper-button-prev', 
            }
        });

这是带左右箭头，跟swiper-wrapper同一级

<div class="swiper-pagination"></div>

初始化

var swiper = new Swiper('#swiper-container3', { 
            pagination: {
                el: '.swiper-pagination',
            }
        });

这是分页器，也是跟swiper-wrapper同一级

详细的可以参考 swiper官网