swiper 自定义分页只滑动一次 [英] swiper custom pagination only slides once

问题描述

我用 swiper 制作了一个非常简单的图像滑块，然后使用 swiper 的 "paginationCustomRender" jQuery 添加了自定义分页和数据属性它生成的分页很好，滑动时一切正常，但它不可点击，所以我添加了一个小函数来告诉我的滑块在点击分页中的一个标签时slideTo()"目标幻灯片但它只工作一次然后该功能将不会再次启动.我已经搜索过，从我发现大多数人没有使用 swiper 的内置选项并自己制作，所以我想知道我应该做什么以及最好的方法是什么.

I made a very simple image slider with swiper then added custom pagination using swiper's "paginationCustomRender" jQuery and data attributes it generates the pagination just fine and everything works when sliding but its not clickable so I added a small function to tell my slider to "slideTo()" the targeted slide when one of the labels in the pagination is clicked but it only works once and then the function will not start again. I've searched and from what I found out most people didn't use swiper's builtin options and made it themselves so I was wondering what should I do and what is the best approach to do it.

提前致谢

这是我的 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();
});

推荐答案

我喜欢 swiper 但有时使用它可能会很痛苦 屁股似乎 iDangero 组需要进行一些更改，因为目前此插件不完全支持功能自定义分页，

I love swiper but sometimes using it can be a real pain the butt seems like iDangero group needs to make a few changes because currently this plugin doesn't support fully functional Custom Pagination,

所以这是我的解决方案:

So here is my solution:

    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);            
        }
    });
};

如果您发现了错误或其他问题，请告诉我

If you found a bug or something please let me know

这篇关于swiper 自定义分页只滑动一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！