Swiper实现轮播图效果

为了实现轮播图（carousel）效果或左右滑动显示不同的内容，我们采用Swiper来实现。

需要引入swiper.min.css和swiper.min.js，文件可从https://github.com/LuoYiHao/front-end-lib/tree/master/swiper下载。

示例HTML代码：

 <div class="swiper-container" id="carousel">
     <div class="swiper-wrapper">
         <div class="swiper-slide">
             <img src="../../images/1.jpg" class="banner"/>
         </div>
         <div class="swiper-slide">
             <img src="../../images/2.jpg" class="banner" />
         </div>
         <div class="swiper-slide">
             <img src="../../images/3.jpg" class="banner" />
         </div>
     </div>
 </div>

示例JS代码：

 var mySwiper = new Swiper('#carousel', {
     autoplay:true,
     loop: true,
 })