本文实例为大家分享了swiper自定义分页器的样式代码，供大家参考，具体内容如下
js主要代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
pagination: {
// 自定义分页器的类名----必填项
el: '.custom-pagination',
// 是否可点击----必填项
clickable: true,
// 分页的类型是自定义的----必填项
type: 'custom',
// 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
renderCustom: function (swiper, current, total) {
console.log(current);//1 2 3 4
}
},
|
一、el
分页器容器的css选择器或HTML标签。分页器等组件可以置于container之外，不同Swiper的组件应该有所区分，如#pagination1，#pagination2。
二、分页器样式类型 可选
‘bullets' 圆点（默认）
‘fraction' 分式
‘progressbar' 进度条
‘custom' 自定义
三、renderCustom()
自定义特殊类型分页器，当分页器类型设置为自定义时可用。
四、slideToLoop()
在Loop模式下Swiper切换到指定slide。切换到的是slide索引是realIndex
源码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 1、CDN引入文件 -->
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">
<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
<!--2、文件自己引入 -->
<!-- <script src="swiper.min.js"></script>
<link rel="stylesheet" href="swiper.min.css" rel="external nofollow" >
<script src="jquery.js"></script> -->
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
text-align: center;
overflow: hidden;
}
a {
text-decoration: none;
color: #000;
}
.swiper-content {
width: 80%;
overflow: hidden;
margin: 0 auto;
}
.swiper-content .title {
height: 100px;
display: flex;
align-items: center;
justify-content: space-around;
}
.swiper-content .nav-item {
float: left;
display: block;
margin-right: 30px;
width: 50px;
height: 30px;
line-height: 30px;
}
/* 点击的激活样式 */
.swiper-content .nav-item.active {
background-color: #378ee6;
}
/* 轮播图的样式 */
.swiper-content .swiper-container {
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<div class="swiper-content">
<!-- 自定义导航 -->
<div class="title">
<!-- 给ul 添加自定义分页器类名 custom-pagination -->
<ul class="nav custom-pagination">
<li class="nav-item active">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a>
</li>
<li class="nav-item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >网站</a>
</li>
<li class="nav-item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关于</a>
</li>
<li class="nav-item">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >联系</a>
</li>
</ul>
</div>
<!-- 轮播图 -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<h1>1</h1>
</div>
<div class="swiper-slide">
<h1>2</h1>
</div>
<div class="swiper-slide">
<h1>3</h1>
</div>
<div class="swiper-slide">
<h1>4</h1>
</div>
</div>
</div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container',
{
// 循环模式
loop: true,
pagination: {
// 自定义分页器的类名----必填项
el: '.custom-pagination',
// 是否可点击----必填项
clickable: true,
// 分页的类型是自定义的----必填项
type: 'custom',
// 自定义特殊类型分页器，当分页器类型设置为自定义时可用。
renderCustom: function (swiper, current, total) {
// console.log(current);//1 2 3 4
// 1、分页器激活样式的改变---给自己添加激活样式并将兄弟的激活样式移出。
$('.custom-pagination').children().eq(current - 1).addClass('active').siblings().removeClass('active');
// 2、分页器点击的时候同时切换轮播图(事件委托)----循环模式slideToLoop--
$('.custom-pagination').on('click', 'li', function () {
mySwiper.slideToLoop($(this).index(), 1000, false)
})
}
},
})
</script>
</body>
</html>
|
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/weixin_45803990/article/details/108545349