(1) 本節(jié)知識點
- 使用分頁器: pagination
- 分頁器樣式: paginationType
- 分頁器可點: paginationClickable
- 顯示隱藏分頁器: paginationHide
- 指定分頁器標簽類型: paginationElement
- 分頁器渲染
- paginationBulletRender
- paginationFractionRender
- paginationProgressRender
(2) 代碼實現(xiàn)
<!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">
<script src="js/swiper.min.js"></script>
</head>
<style>
* {
margin: 0px;
padding: 0px;
}
.swiper-container {
width: 800px;
height: 300px;
border: 10px solid #ccc;
}
.swiper-slide {
font-size: 50px;
}
.swiper-slide:nth-of-type(1) {
background: yellow;
}
.swiper-slide:nth-of-type(2) {
background: blue;
}
.swiper-slide:nth-of-type(3) {
background: red;
}
.swiper-pagination-bullet {
width: 45px;
height: 45px;
}
</style>
<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>
<!-- <div class="nav"></div> -->
</body>
<script>
window.onload = function() {
var mySwiper = new Swiper('.swiper-container', {
direction: 'horizontal', //上下滑動，要是橫著滑就是horizontal,要是豎著滑vertical
//pagination: ".nav", //自定義分頁器放在里面放在外面都可以。要是放在里面就可以用swiper-pagination
pagination: ".swiper-pagination",
paginationType: "bullets",
// /*這個就是bullets小圓點 fraction分式 1/3 progress 進度條最上方*/
paginationClickable: true, //表示分頁能否點擊true表示能點擊false表示不能點擊
//paginationHide: true, //顯示隱藏分頁器,點擊容器來回切換顯示還是隱藏
paginationElement: "i", //盡量不要是li因為最外層是DIV
//改變分頁器里面的HTML
paginationBulletRender: function(swiper, index, classname) {
return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
"</span>"
},
//分式渲染
// paginationFractionRender: function(swiper, index, classname) {
// return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
// "</span>"
// },
// //進度條渲染
// paginationProgressRender: function(swiper, index, classname) {
// return "<span class='" + classname + "'style='color:#fff;line-height:45px;'>" + index +
// "</span>"
// },
})
}
</script>
</html>
