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 には、ダウンロードした zip に含まれる 29-custom-pagination.html という質問に適合するデモがあります。

オプションで：

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 に答える