опасный swiper, цифры в нумерации страниц

Можно ли отображать номер слайда в каждом диапазоне «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>

Как я могу это сделать?

Спасибо.


javascript plugins swiper
person Kévin Vilela Pinto    schedule 04.12.2014    source источник

Ответы (3)


arrow_upward
7
arrow_downward

в Swiper v3.3.1 есть демонстрация, которая может соответствовать вашему вопросу под названием 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>';
    }
person MCSell    schedule 06.07.2016
comment
Это должно быть помечено как ответ. Идеальное решение и гибкость. Хорошая работа. - person Victor; 30.07.2016
comment
Спасибо дружище, оценил! - person Siyah; 07.02.2018

arrow_upward
2
arrow_downward

Это мое решение, немного грязное, но оно выполняет свою работу:

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() добавляет числа к элементам разбиения на страницы.

Янник

person Yannick    schedule 12.01.2015

arrow_upward
1
arrow_downward

Swiper v3.1.0 будет иметь следующий параметр, поддерживающий эту функцию.

paginationBulletRender(index, className)
person Amin    schedule 30.07.2015