<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./css/swiper.min.css">
<style>
//給輪播圖的容器定義一個樣式
.swiper-container{
width: 500px;
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>
</body>
<script src="./js/swiper.min.js"></script>
<script>
// 初始化一個Swiper實例，給當前的Swiper實例添加配置項
var mySwiper = new Swiper('.swiper-container', {
initialSlide:0,
direction: 'horizontal',
loop: true,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// 分頁器 也就是一個個的小點
pagination: {
el: '.swiper-pagination',
},
centeredSlides : true,
// 如果需要前進后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView : 3,
spaceBetween : 20,
slidesOffsetBefore:80,
})
</script>
</html>
（1） initialSlide:0,類型：number ；設定初始化時slide的索引，也就是對應索引的swiper-slide添加active屬性；
（2）direction：Slides的滑動方向，可設置水平(horizontal)或垂直(vertical)；也就是水平輪播或垂直輪播；
（3）speed:1000,切換速度，即slider自動滑動開始到結束的時間（單位ms），也是觸摸滑動時釋放至貼合的時間。也就是一張輪播圖開始輪播的時刻到結束輪播的時刻所用的時間；
（4）grabCursor:true,設置為true時，鼠標覆蓋Swiper時指針會變成手掌形狀，拖動時指針會變成抓手形狀。（根據瀏覽器形狀有所不同）；
（5）loop: true, 循環(huán)模式選項 true 或者false，設置為true 則開啟loop模式。loop模式：會在原本slide前后復制若干個slide(默認一個)并在合適的時候切換，讓Swiper看起來是循環(huán)的。 loop模式在與free模式同用時會產生抖動，因為free模式下沒有復制slide的時間點。
（6）disableOnInteraction ：用戶操作swiper之后，是否禁止autoplay。默認為true：停止。如果設置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。操作包括觸碰，拖動，點擊pagination等。
也就是默認為 true：這種情況 我們操作過輪播圖之后，比如鼠標移入，點擊左右切換按鈕，輪播圖會停止自動輪播；
設置為false后，無論我們怎么操作，當時會停止自動輪播，操作完成后，會自動開啟輪播；
（7）autoplay: {
delay: 9000,//自動切換的時間間隔，單位ms
},
（8）spaceBetween ：輪播圖之間的間隔；
（9）slidesPerView ：設置slider容器能夠同時顯示的slides數量(carousel模式)。
可以設置為數字（可為小數，小數不可loop），或者 'auto'則自動根據slides的寬度來設定數量。
loop模式下如果設置為'auto'還需要設置另外一個參數loopedSlides。
slidesPerView: 'auto'目前還不支持多行模式（當slidesPerColumn > 1）
（10）loopedSlides：在loop模式下使用slidesPerview:'auto'，還需使用該參數設置所要用到的loop個數(一般設置大于可視slide個數2個即可)。簡單點就是每次幾張圖一起輪播；
