代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

带滚动条的Swiper自定义分页

swiper css html jquery javascript

TheOrdinaryGeek · 技术社区 · 6 年前

我正在尝试使用创建自定义分页滚动条 Swiper 4.0.6 .

我想要一个类似滚动条的东西 this page . 请参阅每个滚动部分上方的标题。

根据 API 我可以使用 renderCustom 函数。我似乎无法让它工作。我看不到屏幕上的分页,尽管swiper工作正常。

有人能帮忙解决这个问题吗?

到目前为止,我的代码;

HTML

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" data-name="Item 1">
            <p>Testing</p>
        </div>
        <div class="swiper-slide" data-name="Item 2">
            <p>Testing</p>
        </div>
        <div class="swiper-slide" data-name="Item 3">
            <p>Testing</p>
        </div>
    </div>
    <div class="swiper-pagination1"></div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

JS公司

var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
    names.push($(this).data("name"));
});
var swiper1 = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination1',
        type: 'custom',
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    renderCustom: function(swiper, current, total) {
        var text = "<span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'>";
        for (let i = 1; i <= total; i++) {
            if (current == i) {
                text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'>" + names[i] + "</span>";
            } else {
                text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
            }
        }
        text += "</span>";
        return text;
    }
});

如有任何建议,不胜感激。

1 回复 | 直到 6 年前

Zayaty 6 年前

您必须将renderCustom函数放入分页中,如下所示:

    var names = [];
$(".swiper-wrapper .swiper-slide").each(function(i) {
    names.push($(this).data("name"));
});
var swiper1 = new Swiper('.swiper-container', {
    pagination: {
        el: '.swiper-pagination1',
        type: 'custom',
    renderCustom: function(swiper, current, total) {
        var text = "<span class='pContainer' style='background-color:transperent;text-align: center;width:100%; display:block'>";
        for (let i = 1; i <= total; i++) {
                //alert(total);
            if (current == i) {

                text += "<span style='display:inline-block;border-top:3px solid #afd869;text-align:left;margin-right:4px;width: 20%;color:#afd869;padding:5px;'>" + names[i-1] + "</span>";

            } 

            else {

                text += "<span style='display:inline-block;border-top:3px solid white;text-align:left; margin-right:4px;width: 20%;color:white;padding:5px;'>" + names[i] + "</span>";
            }
        }
        text += "</span>";
        return text;
    }
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    }
});

并将风格延伸。swiper分页自定义如下:

.swiper-pagination-custom{
   position: absolute;
   bottom: 0;
   z-index: 10;
}