swiper轮播图切换指示点改变背景颜色

swiper

官方api文档：https://www.swiper.com.cn/api/index.html
如果有一个页面中需要引用多个Swiper，可以给每个容器加上ID或Class区分，但是需要保留默认的类名swiper-container。
如何初始化一个swiper
html:

<div class="swiper-container"><div class="swiper-wrapper "><div class="swiper-slide">...</div></div>
</div>

js:

var swiper = new Swiper('.swiper-container')

swiper组件

组件	功能
Navigation	按钮
Pagination	分页器
Scrollbar	滚动条
Autoplay	自动切换

以上是我经常使用的一小部分。

Navigation：可以用来设置前进和后退的按钮从而控制swiper的切换。(样式可以自己定义)

<div class="swiper-container"><div class="swiper-wrapper "><div class="swiper-slide">...</div></div><div class="swiper-button-prev"></div><div class="swiper-button-next"></div>
</div>
<script>var swiper = new Swiper('.swiper-container', {navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},});</script>

2.Pagination：分页器可设置小圆点样式（默认）、分式样式或进度条样式，下面用的是默认的小圆点样式，上面实例也是用的类似的。

<div class="swiper-container"><div class="swiper-wrapper "><div class="swiper-slide">...</div></div><div class="swiper-pagination"></div>
</div>
<script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',type: 'fraction',}});</script>

其中type为swiper分页器的样式，其他样式还有：‘bullets’圆点，‘fraction’分式，‘progressbar’进度条，‘custoom’自定义
3.scrollbar：滚动条（用法和上面一样大同小异）。
4.Autoplay：自动切换。有两个值true/flase(默认)
当为true时启动自动切换。

<div class="swiper-container"><div class="swiper-wrapper "><div class="swiper-slide">...</div></div>
</div>
<script>
var mySwiper = new Swiper('.swiper-container', {autoplay:true,//等同于以下设置/*autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: true,},*/
});
</script>

其中，delay为自动切换的时间间隔，单位为ms
例如：delay：4000 //4秒切换一次。
stopOnLastSlide为当切换到最后一个slide时是否自动停止，有两个值true/false
默认值为false，当值为true时切换到最后一个slide时自动停止。

实例

在前几天做h5移动端的时候，发现项目里有个轮播图切换，且指示点为文字背景颜色随着轮播图切换而改变，效果如下图：

多次百度未果决定自己写一下，下面是代码：

<div class="swiper-card"><div class="swiper-container swiper2" id="swiper-container-2"><div class="swiper-wrapper "><div class="swiper-slide"><img src="img/part-5-slide-1.36470d1.png"/></div><div class="swiper-slide"><img src="img/part-5-slide-2.cc4e700.png"/></div><div class="swiper-slide"><img src="img/part-5-slide-3.cd3828e.png"/></div><div class="swiper-slide"><img src="img/part-5-slide-4.fe1487a.png"/></div></div><!-- Add Pagination --><div class="swiper-pagination pagiation"></div></div></div><!--swiper-card-->

 <script>var swiper2 = new Swiper('.swiper2', {spaceBetween: 30,centeredSlides: true,autoplay: {delay: 2500,disableOnInteraction: false,},pagination: {el: '.swiper-pagination',clickable: true,renderBullet: function (index, className) {switch(index){case 0:text='兴趣编程';break;case 1:text='兴趣编程';break;case 2:text='兴趣编程';break;case 3:text='兴趣编程';break;}return '<div class="' +  className + '">'+'<div class="s' +(index+1) + '">'+text+'</div>'+'</div>';},},});</script>

然后再更改一下css就可以实现基本的效果了。
和普通的swiper切换没太大的区别主要的就是用了自定义分页器：
renderBullet(index, className)
渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。