Question

我想用一个分页制作2个滑块。我使用Swiper 2.7.6。

两个滑块都应该有不同的效果。我还没有在官方网页上找到一个例子。我希望它看起来像this。这是一个代码：

  if ($('.photo-slider').length) {
    $('.photo-slider').each(function(i){
        var $this = $(this);
        //slider ID
        var id = 'photo_slider_'+i;
        // $this.find('.slider').attr('id', id);
        $this.find('.slider').attr('id', id);
        // pagination
        var paginationClass = 'pagination-photo'+i;
        $('.photo-slider').append('<div class="slider-pagination for-photo '+paginationClass+'"></div>');

        var $slider = new Swiper('#'+id, {
            slidesPerView: 1,
            loop: true,
            grabCursor: true,
            calculateHeight: true,
            pagination: '.'+paginationClass,
            paginationClickable: true
        });

        $this.find('.slider-arrow').on('click', function(){
            if ($(this).hasClass('prev')) {
                $slider.swipePrev();

            } else {
                $slider.swipeNext();
            }

            return false;
        });

        i++;
    });        
}

Answer 1

您是否尝试仅使用一组分页/导航链接2个单独的Swiper幻灯片实例？

为什么不设置分页＆amp;一个实例上的导航按钮？如果你将它们链接起来，任何一方都会影响另一方。

如何用一个分页创建多个Swiper滑块？

1 个答案: