swiper自定义分页器

 html部分

<div class="swiper-container">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src="">
        </div>
     </div>
     <!-- 如果需要分页器 -->
     <div class="swiper-pagination"></div>
</div>

js部分

<script type="text/javascript" src="js/swiper-bundle.min.js"> </script>

var mySwiper = new Swiper(".swiper-container", {
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
        type:'custom',   //自定义分页器
        renderCustom: function (swiper, current, total) {  
            var paginationHtml = " ";
            for (var i = 0; i < total; i++) {
                 // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                 if (i === (current - 1)) {
                      paginationHtml += '<span class="swiper-pagination-customs swiper-pagination-customs-active" ></span>';                                                                                                 
                }else{
                     paginationHtml += '<span class="swiper-pagination-customs" ></span>';
                }					  
            }
            return paginationHtml;
        },
    }
});
                   
//点击分页器跳转到对应页面
$(".swiper-pagination").on("click","span",function(){
        var index = $(this).index();
        mySwiper.slideTo(index);
})

 css部分

.swiper-pagination-custom {
    height: 34px;
    text-align: end !important;  //这里设置分页器的位置 放在行的末尾
}
/*自定义分页器的样式*/
.swiper-pagination-customs {
    width: 34px;
    height: 34px;
    display:inline-block;
    border-radius: 5px;
    margin: 0 3px;
    outline: 0;
    box-sizing: border-box;
}
.swiper-pagination-customs:last-child{
    margin-right: 16px;
}
/*自定义分页器激活时的样式表现*/
.swiper-pagination-customs-active {
    border: 2px solid #fcb916;
    width: 36px;
    height: 36px;
}

解决动态加载数据滑动失效的问题：

1. 在swiper初始化加两行代码

var mySwiper = new Swiper('.swiper-container', { 

 observer:true,//修改swiper自己或子元素时，自动初始化swiper 
 observeParents:true//修改swiper的父元素时，自动初始化swiper 

});

2.在数据请求后初始化swiper

function getMess(){
    globalParams = {
        //发送请求的参数
    }
    api.post2("xxx/xxx/xxx", globalParams, function(res) {  //ajax请求
        var list = res.data.list;
        list.forEach((item) => {
                var itm = item.formModel.cgformFieldList
                var imgMess = itm[10].propertyLabel.split(",")
                var msg = ""      // 轮播详情
                imgMess.forEach((item) => {
                    msg += `
                        <div class="swiper-slide">
                            <img src="https://qiniu.hollysmart.com.cn/${item}">
                        </div>`
                    $(".swiper-wrapper").html(msg);//动态加载轮播项

                      //初始化轮播组件
                    var mySwiper = new Swiper(".swiper-container", {
                        pagination: {
                            el: '.swiper-pagination',
                            clickable: true,
                            type:'custom',
                            renderCustom: function (swiper, current, total) {
                                var paginationHtml = " ";
                                for (var i = 0; i < total; i++) {
                                    // 判断是不是激活焦点，是的话添加active类，不是就只添加基本样式类
                                    //要求是分页器为缩小的轮播图片 将图片插入到元素中
                                    if (i === (current - 1)) {
                                        paginationHtml += 
                                        '<span class="swiper-pagination-customs swiper-pagination-customs-active" >' + `<img src="https://xxx.com.cn/${imgMess[i]}">` + '</span>';
                                    }else{
                                        paginationHtml += '<span class="swiper-pagination-customs" >'+  `<img src="https://xxx.com.cn/${imgMess[i]}">` +'</span>';
                                    }					  
                                }
                                return paginationHtml;
                            },
                        }
                    });
                   
                    //点击分页器跳转到对应页面
                    $(".swiper-pagination").on("click","span",function(){
                        var index = $(this).index();
                        mySwiper.slideTo(index);
                    })
                    
                })
        })
    })
}

记录下jquery的使用方法 ，方便后续的查看

之后运用到vue时再继续写