(1) 本节知识点
- 使用分页器: pagination
- 分页器样式: paginationType
- 分页器可点: paginationClickable
- 显示隐藏分页器: paginationHide
- 指定分页器标签类型: paginationElement
- 分页器渲染
- paginationBulletRender
- paginationFractionRender
- paginationProgressRender
(2) 代码实现
<!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>
