javascript - 危险的刷卡器，分页中的数字

Question

是否可以在每个“swiper-pagination-switch”span 中显示幻灯片的编号？ (例如:1,2,3, ...)？

默认情况下，插件会像这样创建 HTML 的一部分:

<div class="pagination">
    <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch"></span>
    <span class="swiper-pagination-switch"></span>
    <span class="swiper-pagination-switch"></span></div>
</div>

我想在每个 span 中插入与其相关的幻灯片数量，如下所示:

<div class="pagination">
    <span class="swiper-pagination-switch swiper-visible-switch swiper-active-switch">1</span>
    <span class="swiper-pagination-switch">2</span>
    <span class="swiper-pagination-switch">3</span></div>
</div>

我该怎么做？

谢谢。

Answer 1

在 Swiper v3.3.1 中有一个演示可以满足您的问题，称为 29-custom-pagination.html，它包含在下载的 zip 中:

选择:

var swiper = new Swiper('.swiper-container', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    paginationBulletRender: function (index, className) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
    }