H5頁面（五）效果輪播圖之-------swiper.js外掛
swiper是一款輕量級移動裝置滑塊的js框架！
swiper 3.x主流偏向移動裝置！
注意：npm install --save swiper;需要以下方式引入：
第一步：import Swiper from "swiper"
第二步：import 'swiper/dist/css/swiper.css'
//因為npm打包的swiper在node_modules檔案裡，所有可以直接這樣引用
1. 下載swiper外掛： 官網http://www.swiper.com.cn/；
必須下載swiper.js/swiper.min.js;
選擇下載swiper.css/swiper.min.css;
2.在html頁面引入swiper.js/swiper.min.js和swiper.css/swiper.min.css;
3.案例：
<link rel="stylesheet" type="text/css" href="../css/swiper-4.2.2.min.css">
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分頁器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動條 -->
<div class="swiper-scrollbar"></div>
</div>
<!-- 導航等元件可以放在container之外 -->
<script src="../js/swiper-4.2.2.min.js"></script>
<script>
var mySwiper = new Swiper('.swiper-container', {
direction: 'vertical', //2.Slides的滑動方向，可設定水平(horizontal)或垂直(vertical)；
initialSlide: 1, //3.初始化顯示的swiper-slide，從下標為0的swiper-slide開始，預設為0；
speed: 300, //4.切換速度，即slider自動滑動開始到結束的時間（單位ms），也是觸控滑動時釋放至貼合的時間,預設300。
width: 500,
height: 500, //5.制Swiper的高/寬度(px)，當你的Swiper在隱藏狀態下初始化時且切換方向為垂直才用得上。這個引數會使自適應失效。
autoHeight: true, //6.自動高度。設定為true時，wrapper和container會隨著當前slide的高度而發生變化。
preloadImages: true, //7.預設為true，Swiper會強制載入所有圖片。
autoplay: { //8.自動播放
delay: 3000, //8.1自動播放間隔時間
stopOnLastSlide: false, //8.2切換到最後一個是否停止，但是在loop:true下無效果；
disableOnInteraction: true, //8.3使用者觸碰,懸停，拖放是否自動播放停止，預設為true;
reverseDirection: true, //8.4 是否開啟反向輪播，預設為false
},
document.getElementById("#d1").onclick = function() { //9.按鈕開啟/關閉自動輪播效果
mySwiper.autoplay.stop();
mySwiper.autoplay.start();
}
// 如果需要分頁器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前進後退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滾動條
scrollbar: {
el: '.swiper-scrollbar',
},
onSlideChangeEnd: function(swiper) {
mySwiper .update(); //更新Swiper，這個方法包含了updateContainerSize，updateSlidesSize，updateProgress，
updatePagination，updateClasses方法。也就是資料改變是重新初始化一次swiper
mySwiper .startAutoplay(); //重新開始自動切換；
mySwiper .reLoop(); //重新對需要迴圈的slide個數進行計算，當你改變了slidesPerView引數時需要用到，需要自動輪播的時候必須要加上；
}
})
</script>
