swiper自定义pagination

最新推荐文章于 2024-11-07 14:06:33 发布

weixin_39107093

最新推荐文章于 2024-11-07 14:06:33 发布

阅读量6k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_39107093/article/details/103511062

版权

本文介绍如何使用Swiper插件实现带有自定义分页效果的轮播图，包括不同状态下的样式变化及点击事件绑定，适用于前端开发中图片展示需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
pagination为不同的图片，可滑动，支持点击

var mySwiper = new Swiper(".swiper-container", {
  pagination: {
    el: ".swiper-pagination",
    type: 'custom',
    renderCustom:function(swiper,current,total){
      var paginationHtml = '';
      var text = ['等级专属券','免邮特权','生日礼券']
      for(var i=1;i<=total;i++){
        if(i==current){
          paginationHtml+=`<div class='pagination pagination_active'>
                            <span class='pagination_icon icon${i}'></span>
                            <span class='pagination_text'>${text[i-1]}</span>
                          </div>`
        }else{
          paginationHtml+=`<div class='pagination'>
                            <span class='pagination_icon icon${i}'></span>
                            <span class='pagination_text'>${text[i-1]}</span>
                          </div>`
        }
      };
      return paginationHtml
    }
},
  hashNavigation: {
    watchState: true,
  },
  clickable :true,
});
$('.swiper-pagination').on('click','.pagination',function(){ 
  var index = $(this).index(); 
  mySwiper.slideTo(index, 1000, false);
})