轮播图插件（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');

这是常规的，

初始化

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

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

初始化

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

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

详细的可以参考 swiper官网