jquery - 为 iSwiper iDangerous 分页使用自定义图标

Question

我正在尝试将自定义图标用于 iSwiper 的分页。我已经设法使用以下代码将图标添加到分页中(在创建刷卡器后启动)

var countPagination = 0;
     $(".swiper-pagination-switch").each(function() {
            if (countPagination == 1) {
                $(this).html("<i class='fa fa-check iconFooter'></i>");            
            } else if (countPagination == 2) {                                
              $(this).html("<i class='fa fa-check iconFooter'></i>");
            } else if (countPagination == 3) {
               $(this).html("<i class='fa fa-check iconFooter'></i>");
            } else if (countPagination == 4) {
                $(this).html("<i class='fa fa-check iconFooter'></i>");
            } else if (countPagination == 5) {
                 $(this).html("<i class='fa fa-check iconFooter'></i>"); 

            }
                        countPagination++;


                    });

我正在使用超赞的字体图标，它们看起来都很完美。问题是，当我尝试准确地单击图标所在的分页时，它没有检测到单击。这似乎是一个 z-index 问题所以我调整了 css 以将图标的 z-index 设置为 z-index:0;和分页为 z-index:5 但它似乎没有帮助。

有什么建议吗？

Answer 1

使用默认 pagination function :

    mySwiper = new Swiper('.swiper-container', {
        initialSlide: 1,
        pagination: ".pagination",
        paginationClickable: true,
        paginationBulletRender: function (index, className) {
            return '<span class="' + className + ' page' + index + '">page number ' + (index + 1) + ' or and any other text here</span>';
        }
    });

然后您可以轻松管理每个分页按钮的样式:

.pagination .page1 {background:url(...) no-repeat; width:50px; height:50px;} 
.pagination .page2 {background:url(...)}