swiper小例子

一、下載 npm i swiper -S

二、添加swiper的css、js

　　　<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">

　　　<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>

三、html樣式

　　<div class="swiper-container">

　　　　<div class="swiper-wrapper">

　　　　　　<div class="swiper-slide"><img src="http://img2.imgtn.bdimg.com/it/u=3588772980,2454248748&fm=27&gp=0.jpg" alt=""><p>123443322</p></div>

　　　　　　<div class="swiper-slide"><img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt=""><p>dadasdasdasd</p></div>

　　　　　　<div class="swiper-slide"><img src="http://img5.imgtn.bdimg.com/it/u=1046983545,2051560208&fm=27&gp=0.jpg" alt=""><p>阿斯打掃打掃打掃大大的</p></div>

　　　　</div>

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

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

　　</div>

四、建立實例

　　var mySwiper = new Swiper ('.swiper-container', {

　　　　　　loop: true,

　　　　　　autoplay: {

　　　　　　delay: 1000,

　　　　　　disableOnInteraction: false

　　　　},

　　　　// 若是須要前進後退按鈕

　　　　navigation: {

　　　　　　nextEl: '.swiper-button-next',

　　　　　　prevEl: '.swiper-button-prev',

　　　　}

　　})

　　mySwiper.el.onmouseover = function(){

　　　　mySwiper.autoplay.stop();

　　}

　　mySwiper.el.onmouseout = function(){

　　　　mySwiper.autoplay.start();

　　}

四、css樣式

　　本身看着辦(๑•̀ㅂ•́)و✧ 嘻嘻

五、詳細請查看文檔

　　http://www.swiper.com.cn/api/index.html