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	自动切换

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

1. 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)
渲染分页器小点。这个参数允许完全自定义分页器的指示点。接受指示点索引和指示点类名作为参数。