2

是否可以显示每个“swiper-pagination-switch”跨度中的幻灯片编号？（如：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>

我想在每个跨度中插入与之相关的幻灯片数量，如下所示：

<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>

我怎么能做到这一点？

谢谢。

4

3 回答 3

7

在 Swiper v3.3.1 中有一个 Demo 可以适合您的问题，称为 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>';
    }
于 2016-07-06T08:09:11.370 回答
2

这是我的解决方案，有点脏，但它可以完成工作：

var Swiper_slider = slider.swiper({
            pagination:          '.slider_pagination',
            paginationClickable: true,
            mode:                'horizontal',
            loop:                true,
            speed:               600,
            autoplay:            5000,
            paginationElement:   'a',
            onSwiperCreated: function(){

                $('.slider_pagination a').each(function( key ){
                    $(this).html( key + 1 );
                });

            }
});

创建滑块后，将.each()循环添加分页元素上的数字。

雅尼克

于 2015-01-12T14:41:47.347 回答
1

Swiper v3.1.0 将具有以下参数，支持此功能。

paginationBulletRender(index, className)
于 2015-07-30T10:49:57.213 回答