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

时间：2024-12-17 21:02:10

swiper

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

<div class="swiper-container">
	<div class="swiper-wrapper ">
      <div class="swiper-slide">...</div>
	</div>
</div>
  • 1
  • 2
  • 3
  • 4
  • 5

js:

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

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

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

<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14

其中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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

其中，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."/></div>
	      <div class="swiper-slide"><img src="img/part-5-slide-2."/></div>
	      <div class="swiper-slide"><img src="img/part-5-slide-3."/></div>
	      <div class="swiper-slide"><img src="img/part-5-slide-4."/></div>
		    </div>
   		 <!-- Add Pagination -->
    	<div class="swiper-pagination pagiation"></div>
 	</div>
  </div><!--swiper-card-->
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
	<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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

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

相关文章