Question

我使用swiper制作了一个非常简单的图像滑块，然后使用swiper的“paginationCustomRender”jQuery和数据属性添加了自定义分页，它生成的分页很好，滑动时一切正常但是它不可点击所以我添加了一个小函数当单击分页中的一个标签时，告诉我的滑块“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();
});

Answer 1

我喜欢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);            
        }
    });
};

如果您发现了某个错误或其他内容，请告诉我

Answer 2

首先感谢您使用自定义分页选项卡，我使用了您的代码，但我遇到了同样的问题：我只能在这些分页上单击一次，这是适合我的解决方案。在“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;
                })
            }
        });



    });

`

swiper自定义分页只滑动一次

2 个答案: