<!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>
//給輪播圖的容器定義一個(gè)樣式
.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>
<!-- 如果需要分頁(yè)器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要導(dǎo)航按鈕 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滾動(dòng)條 -->
<div class="swiper-scrollbar"></div>
</div>
</body>
<script src="./js/swiper.min.js"></script>
<script>
// 初始化一個(gè)Swiper實(shí)例，給當(dāng)前的Swiper實(shí)例添加配置項(xiàng)
var mySwiper = new Swiper('.swiper-container', {
initialSlide:0,
direction: 'horizontal',
loop: true,
autoplay: {
delay: 1000,
stopOnLastSlide: false,
disableOnInteraction: true,
},
// 分頁(yè)器 也就是一個(gè)個(gè)的小點(diǎn)
pagination: {
el: '.swiper-pagination',
},
centeredSlides : true,
// 如果需要前進(jìn)后退按鈕
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
slidesPerView : 3,
spaceBetween : 20,
slidesOffsetBefore:80,
})
</script>
</html>
（1） initialSlide:0,類型：number ；設(shè)定初始化時(shí)slide的索引揍诽，也就是對(duì)應(yīng)索引的swiper-slide添加active屬性籽慢；
（2）direction：Slides的滑動(dòng)方向，可設(shè)置水平(horizontal)或垂直(vertical)住诸；也就是水平輪播或垂直輪播驾胆；
（3）speed:1000,切換速度，即slider自動(dòng)滑動(dòng)開(kāi)始到結(jié)束的時(shí)間（單位ms）贱呐，也是觸摸滑動(dòng)時(shí)釋放至貼合的時(shí)間丧诺。也就是一張輪播圖開(kāi)始輪播的時(shí)刻到結(jié)束輪播的時(shí)刻所用的時(shí)間；
（4）grabCursor:true,設(shè)置為true時(shí)奄薇，鼠標(biāo)覆蓋Swiper時(shí)指針會(huì)變成手掌形狀驳阎，拖動(dòng)時(shí)指針會(huì)變成抓手形狀。（根據(jù)瀏覽器形狀有所不同）馁蒂；
（5）loop: true, 循環(huán)模式選項(xiàng) true 或者false呵晚，設(shè)置為true 則開(kāi)啟loop模式。loop模式：會(huì)在原本slide前后復(fù)制若干個(gè)slide(默認(rèn)一個(gè))并在合適的時(shí)候切換沫屡，讓Swiper看起來(lái)是循環(huán)的饵隙。 loop模式在與free模式同用時(shí)會(huì)產(chǎn)生抖動(dòng)，因?yàn)閒ree模式下沒(méi)有復(fù)制slide的時(shí)間點(diǎn)沮脖。
（6）disableOnInteraction ：用戶操作swiper之后金矛，是否禁止autoplay。默認(rèn)為true：停止勺届。如果設(shè)置為false驶俊，用戶操作swiper之后自動(dòng)切換不會(huì)停止，每次都會(huì)重新啟動(dòng)autoplay免姿。操作包括觸碰饼酿，拖動(dòng)，點(diǎn)擊pagination等胚膊。
也就是默認(rèn)為 true：這種情況 我們操作過(guò)輪播圖之后嗜湃，比如鼠標(biāo)移入奈应，點(diǎn)擊左右切換按鈕，輪播圖會(huì)停止自動(dòng)輪播购披；
設(shè)置為false后杖挣，無(wú)論我們?cè)趺床僮鳎?dāng)時(shí)會(huì)停止自動(dòng)輪播刚陡，操作完成后惩妇，會(huì)自動(dòng)開(kāi)啟輪播；
（7）autoplay: {
delay: 9000,//自動(dòng)切換的時(shí)間間隔筐乳，單位ms
},
（8）spaceBetween ：輪播圖之間的間隔歌殃；
（9）slidesPerView ：設(shè)置slider容器能夠同時(shí)顯示的slides數(shù)量(carousel模式)。
可以設(shè)置為數(shù)字（可為小數(shù)蝙云，小數(shù)不可loop）氓皱，或者 'auto'則自動(dòng)根據(jù)slides的寬度來(lái)設(shè)定數(shù)量。
loop模式下如果設(shè)置為'auto'還需要設(shè)置另外一個(gè)參數(shù)loopedSlides勃刨。
slidesPerView: 'auto'目前還不支持多行模式（當(dāng)slidesPerColumn > 1）
（10）loopedSlides：在loop模式下使用slidesPerview:'auto'波材，還需使用該參數(shù)設(shè)置所要用到的loop個(gè)數(shù)(一般設(shè)置大于可視slide個(gè)數(shù)2個(gè)即可)。簡(jiǎn)單點(diǎn)就是每次幾張圖一起輪播身隐；
