Swiper自定义分页器的样式

注: 不同版本的swiper使用的方式可能不一样,请参考swiper官网

swiper的使用它是有自己默认的分页器样式一般是为小点点,我们可以通过type属性去控制它的样式。

• ‘bullets’  圆点（默认）
• ‘fraction’  分式 
• ‘progressbar’  进度条
• ‘custom’ 自定义

使用方式:

<script language="javascript"> 
var mySwiper = new Swiper('.swiper',{
pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
    //type: 'fraction',
    //type : 'progressbar',
    //type : 'custom',
  },

})
</script>

当然如果我们要自己去自定更加复杂的分页器样式,比如分页器样式也是图片这些之类的话,那么我们就需要使用type="custom"去自定义样式了。这里就用相对应的图片分页器,效果如下:

QQ录屏20230406164751

点击相对应得左边小图片,图片也会滑动切换，如果大家是需要实现这样的效果的话那就接着往下看。

<div class="swiper-pagination">
	<ul>
		<?php foreach ($productInfo['additional_image'] as $_image) { ?>
			<li style="margin-left:5px;" class="swiper-pagination-bullet">
			    <img width="<?php echo ADDITIONAL_IMAGE_WIDTH; ?>" height="<?php echo ADDITIONAL_IMAGE_HEIGHT; ?>" src="<?php echo get_small_image($_image,  ADDITIONAL_IMAGE_WIDTH, ADDITIONAL_IMAGE_HEIGHT); ?>" />
			</li>
		<?php } ?>
	</ul>

    <!--当页面变小,出现第中分页器的样式-->
	<div class="b_item2">
		<?php foreach ($productInfo['additional_image'] as $_image) { ?>
			<span class="swiper-pagination-bullet"></span>
		<?php } ?>
	</div>

</div>

首先在分页器结构中(swiper-pagination)中写上需要的结构,(我这里是使用php获取图片的,如果大家是使用自己本地文件的图片就需要一个一个结构去写出来)。写到了这里我们的图片分页器就完成了,当然最终的结果还是需要调整分页器的样式(这个就不用多说了)。其实还是非常简单的，最主要的就是type="custom"这个属性了，如果没有的话，分页器就是默认的小点点。

Swiper自定义分页器活动样式

注: 因为自定义分页器样式的原因,如果需要添加分页器被选中之后的样式就需要自己再去设置,自定义分页器是没有被选中之后的样式的。

var swiper = new Swiper(".mySwiper", {
		slidesPerView: 1,
		loop: true,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
			type: 'custom',
			renderCustom: function (swiper, current, total) {
				$('.swiper-pagination ul').children().eq(current -  1).addClass('active').siblings().removeClass('active');
				$('.swiper-pagination .b_item2').children().eq(current - 1).addClass('active').siblings().removeClass('active');
			}
		},
	});

renderCurstom函数中current参数就可以记录当前分页器是第几个。这样话就可以实现给当前被选中的分页器加上样式,其他还未被选中的分页器删除样式从而实现自定义分页器当前活动的演示。