пользовательская разбивка на страницы swiper только скользит один раз

Я сделал очень простой слайдер изображений с помощью swiper, затем добавил пользовательскую разбивку на страницы, используя jQuery "paginationCustomRender" swiper и атрибуты данных. генерирует разбиение на страницы просто отлично, и все работает при скольжении, но не кликабельно, поэтому я добавил небольшую функцию, чтобы сообщить моему слайдеру «slideTo ()» целевого слайда, когда одна из меток в разбивке на страницы нажата, но она работает только один раз, а затем функция не запустится снова. Я искал и из того, что я узнал, большинство людей не использовали встроенные параметры swiper и сделали его сами, поэтому мне было интересно, что мне делать и как лучше всего это делать.

заранее спасибо

вот мой HTML:

<div class="main_slider_wrapper left">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="slide_item swiper-slide" data-name="slide-1">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner1.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                    <div class="slide_item swiper-slide" data-name="slide-2">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner2.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                    <div class="slide_item swiper-slide" data-name="slide-3">
                        <a href="#">
                            <img src="assets/img/pages/home/main-slider/Banner3.jpg" alt="">
                        </a>
                    </div>
                    <!-- /slide_item -->
                </div>
                <!-- /swiper-wrapper -->
                <div class="swiper-button-prev fawesome fa-chevron-left"></div>
                <div class="swiper-button-next fawesome fa-chevron-right"></div>
                <div class="main_slider_pagination_wrapper swiper-pagination"></div>
            </div>
            <!-- /swiper-container -->
        </div>

и вот js:

    function mainSliderFn() {
    var mainSliderElement = $('.main_slider_wrapper .swiper-container')[0];
    var mainSliderNext = $('.main_slider_wrapper .swiper-button-next')[0];
    var mainSliderPrev = $('.main_slider_wrapper .swiper-button-prev')[0];
    mainSlider = new Swiper(mainSliderElement, {
        direction: 'horizontal',
        loop: false,
        spaceBetween: 0,
        slidesPerView: 1,
        autoResize: false,
        speed: 1500,
        nextButton: mainSliderNext,
        prevButton: mainSliderPrev,

        pagination: '.main_slider_pagination_wrapper',
        paginationClickable: true,
        paginationType: "custom",
        paginationCustomRender: function(swiper, current, total) {
            var names = [];
            $(".main_slider_wrapper .slide_item").each(function(i) {
              names.push($(this).data("name"));
            });
            var text = "<span style='background-color:white;padding:20px;'>";
            for (let i = 1; i <= total; i++) {
              if (current != i) {
                text += "<span class='main_slider_label swiper-pagination-clickable' data-index='"+i+"'>" + names[i-1] + "</span>";
              } else {
                text += "<span class='main_slider_label swiper-pagination-clickable active_label' data-index='"+i+"'>" + names[i-1] + "</span>";
              }

            }
            text += "</span>";
            return text;
        },
    });   
};
function clickableLabelsFn(){
    $('.main_slider_label').on('click', function(e){
        var clicked = $(this);
        var mytarget = $(clicked).data('index');
        if(!$(clicked).hasClass('active_label'))
        {
            mainSlider.slideTo(mytarget-1);
        }
    });
};
$(document).ready(function () {
    mainSliderFn();
    clickableLabelsFn();
});

slider jquery swiper
person Aras    schedule 14.11.2016    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Я люблю swiper, но иногда его использование может быть настоящей болью, кажется, что группе iDangero нужно внести несколько изменений, потому что в настоящее время этот плагин не поддерживает полностью функциональную Custom Pagination,

Итак, вот мое решение:

    function clickableLabelsFn(){

    // Making Labels
    var names = [];
    total = mainSlider.slides.length;
    activeSlide = mainSlider.activeIndex;
    var labelsWrapper = $('.main_slider_labels_wrapper');

    $(".main_slider_wrapper .slide_item").each(function(i) {
        names.push($(this).data("name"));
    });
    for( var counter = 1; counter <= total; counter++ )
    {
        if( activeSlide+1 != counter )
        {
            var labesHtml = $("<span></span>")
                            .addClass("main_slider_label")
                            .data('index', counter)
                            .text(names[counter-1]);
            labelsWrapper.append(labesHtml);
        }
        else{
            var labesHtml = $("<span></span>")
                            .addClass("main_slider_label active_label")
                            .data('index', counter)
                            .text(names[counter-1]);
            labelsWrapper.append(labesHtml);
        }
    }

    mainSlider.on('SlideChangeStart', function(){
        var current = mainSlider.activeIndex;
        $('.main_slider_label').each(function() {
            var thisLabel = $(this);
            var dataIndex = $(thisLabel).data('index');
            if(dataIndex == current+1){
                $(thisLabel).addClass('active_label');
                $(thisLabel).siblings().removeClass('active_label');
            }
        });
    });

    $('.main_slider_label').on('click', function(e){
        var clicked = $(this);
        var sliderTarget = $(clicked).data('index');
        if(!$(clicked).hasClass('active_label'))
        {
            mainSlider.slideTo(sliderTarget-1);            
        }
    });
};

Если вы обнаружили ошибку или что-то в этом роде, дайте мне знать

person Aras    schedule 17.11.2016
comment
Спасибо за повтор, как у вас получилось, у вас есть демо? - person Dan; 20.11.2016
comment
@Dan Извините, я сейчас очень занят проектом, но я сделаю демо a.s.a.p. Если вы спешите, вы можете сделать его, используя образцы кодов, которые я добавил в вопрос. - person Aras; 14.12.2016

arrow_upward
0
arrow_downward

Сначала спасибо за эти настраиваемые вкладки с разбивкой на страницы. Я использовал ваш код, но у меня была та же проблема: я мог щелкнуть только один раз по этим страницам, вот решение, которое сработало для меня. Добавьте изменяющийся слайд в обратный вызов onTransitionEnd

onTransitionEnd: function(){
                $('.slider-tab').on('click', function(){ //slider-tab is a single tab
                    var target = $(this).data('index');
                    blockSwiper.slideTo(target);
                    return;
                })
            }

и полный код

$( document ).find('.block-swiper').each(function (index) {
        var $this = $(this);
        var swiperTabs = $(this).find('.swiper-tabs');
        var blockSwiper = new Swiper($this, {
            pagination: swiperTabs,
            paginationClickable: true,
            paginationType: 'custom',
            slidesPerView: 1,
            loop:true,
            paginationCustomRender: function(swiper, current, total) {
                var names = [];
                var icons = [];
                $this.find(".swiper-slide").each(function(i) {
                    names.push($(this).data("name"));
                    icons.push($(this).data("icon"));
                });
                var text = "<div>";
                for (let i = 1; i <= total; i++) {
                    if (current != i) {
                        text += "<div class='slider-tab' data-index='"+i+"'>"  + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>";
                    } else {
                        text += "<div class='slider-tab active' data-index='"+i+"'>" + "<i class='fa " + icons[i-1] + " aria-hidden='true'></i>" + names[i-1] + "</div>";
                    }
                }
                text += "</div>";
                return text;
            },
            onTransitionEnd: function(){
                $('.slider-tab').on('click', function(){
                    var target = $(this).data('index');
                    blockSwiper.slideTo(target);
                    return;
                })
            }
        });



    });

`

person Maloke    schedule 19.12.2016
comment
Это умный способ Спасибо - person Aras; 24.12.2016