JavaScript--Swiper自定义分页器

article/2025/8/24 3:59:19

图片是以背景显示的，图片上有一层遮罩，最上面是文字。分页器激活状态下是自定义的图片。代码比较容易进行删改，比如不想要遮罩或者文字可以直接删掉。

分页器的效果：
在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><!--这里引入swiper的css文件--><link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"></head><body><!--从Swiper7开始，容器默认类名由'.swiper-container'变更为'.swiper'。--><div class="swiper-container"><div class="swiper-wrapper"><!--一张图一个swiper-slide  DIV--><!--data-swiper-autoplay 设置自动切换的时间间隔--><div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/1.jpg) center;background-size: cover;"><div class="swiper-mask"><div class="swiper-text"><div class="swiper-txt"><p>文字显示</p></div></div></div></div><div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/2.jpg) center;background-size: cover;"><div class="swiper-mask"><div class="swiper-text"><div class="swiper-txt"><p>文字显示</p></div></div></div></div><div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/3.jpg) center;background-size: cover;"><div class="swiper-mask"><div class="swiper-text"><div class="swiper-txt"><p>文字显示</p></div></div></div></div><div class="swiper-slide" data-swiper-autoplay="1800" style="background: url(image/banner/4.jpg) center;background-size: cover;"><div class="swiper-mask"><div class="swiper-text"><div class="swiper-txt"><p>文字显示</p></div></div></div></div></div><!--是否需要分页器--><div class="swiper-pagination"></div></div><!--引入jQuery文件--><script src="js/common/jquery-1.12.4.min.js"></script><!--引入swiper的js文件--><script src="https://unpkg.com/swiper/swiper-bundle.js"></script><!--初始化swiper--><script>var mySwiper = new Swiper('.swiper-container', {spaceBetween: 10,//在slide之间设置距离（单位px）loop: true,//循环播放autoplay: true,//自动播放speed: 500,//播放速度autoplay: {disableOnInteraction: false, //用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。},grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。//分页器pagination: {el: '.swiper-pagination',type: 'custom', //分页器类型 自定义clickable: true,//此参数设置为true时，点击分页器的指示点分页器会控制Swiper切换。//自定义特殊类型分页器，当分页器类型设置为自定义时可用。renderCustom: function(swiper, current, total) {var customPaginationHtml = "";for(var i = 0; i < total; i++) {//判断哪个分页器此刻应该被激活 if(i == (current - 1)) {customPaginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active"></span>';} else {customPaginationHtml += '<span class="swiper-pagination-customs"></span>';}}return customPaginationHtml;},},})// 自定义分页器点击切换$(".swiper-pagination").on("click", "span", function() {var index = $(this).index();mySwiper.slideTo(index+1);})</script></body>
</html>

css
样式可根据需要自行修改

.swiper-container {max-width: 100%;height: 600px;margin: 0 auto;
}
.swiper-slide {color: white;text-align: center;
}
.swiper-slide {width: 100%;height: 600px;background-repeat: no-repeat;background-position: center center;background-size: cover
}
.swiper-slide .swiper-mask {width: 100%;height: 100%;
}
.swiper-text {max-width: 100%;height: 600px;
}
.swiper-slide .swiper-text .swiper-txt {opacity: 1;width: 100%;margin: 0 auto;height: 600px;background-color: rgba(51, 51, 51, 0.5);/*文字设置了水平垂直居中*/display: flex;justify-content: center;align-items: center;
}
.swiper-slide .swiper-text p {font-size: 64px;font-weight: 600;color: #FFFFFF;margin: 0;
}
/*分页器*/
.swiper-pagination {position: absolute;top: 680px !important;/*原本的分页器是有自己的样式的 设置的是距离下边10px。根据自己的需要进行了修改*/
}
/*包裹自定义分页器的div的位置等CSS样式*/
.swiper-pagination-custom {bottom: 5%;left: 0;width: 100%;height: 20px;text-align: center;
}
/*自定义分页器的样式*/
.swiper-pagination-customs {width: 20px;height: 20px;display: inline-block;background: #000;opacity: .3;border-radius: 50%;/*设置圆角，此时分页器形状为圆形*/margin: 0 5px;outline: 0;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {width: 20px;height: 20px;opacity: 1;z-index: 100;background: url(../images/icon-25.svg) no-repeat;/*激活状态显示的是这里设置的图片*/
}