jquery - 当幻灯片数量多于 Slidestoshow 变量时，光滑 slider 中心模式不起作用

Question

我正在处理this site目前我有一个 Slick Slider它使用 centerMode: true 变量。

我将 slidesToShow 设置为 3，因此当幻灯片数量为 3 或更少时，它无法正确居中。 Here's正确使用 3 张以上幻灯片并居中的示例。

我使用的代码稍微改进了一些东西，但它仍然没有完全正确地居中:

// Set preferred slidesToShow
var slidesToShow = 3;
var childElements = $('.category-gallery').children().length;
// Check if we can fulfill the preferred slidesToShow
if( slidesToShow > (childElements-1) ) {
    // Otherwise, make slidesToShow the number of slides - 1
    // Has to be -1 otherwise there is nothing to scroll for - all the slides would already be visible
    slidesToShow = (childElements-1);
}
$('.category-gallery').slick({
    dots: false,
    infinite: true,
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    autoplay: false,
    pauseOnHover:false,
    focusOnSelect: false,
    centerMode:true,
    arrows: true,
});

如何强制它正确居中？

发生的情况是这样的，右侧的大图像应该位于中心。

Answer 1

如果你看source对于 Slick.prototype.setupInfinite()，您会看到以下条件:

if (_.slideCount > _.options.slidesToShow) {
    // The slides are cloned here.
}

这意味着，如果幻灯片总数(即 .slide 元素)小于或等于 slidesToShow 选项，幻灯片将不会被克隆，并且centerMode滚动效果将不会按预期发生。 p>

因此，就 centerMode 滚动效果而言，您的代码确实有效；但是，要获得正确的效果 - 始终可见 3 个项目/幻灯片，并且一次仅滚动一个项目/幻灯片且事件的项目/幻灯片居中，您可以手动克隆幻灯片 (.slide)如下所示:

var slidesToShow = 3; // always 3

// Clone the slides.
var $slides = $('.category-gallery .slide');
if ($slides.length > 1 && $slides.length <= slidesToShow) {
    var $slide;
    $slides.each( function(){
        $slide = $(this).clone(true)
            .insertAfter( $slide || $slides.last() )
            .addClass('slick-cloned-2')
            .attr('id', '');
    });
}

// If the total number of slides is less than 3, we set this to the
// total number of slides - i.e. either 2 or 1. But of course, the
// 3-slides centerMode effect won't happen anymore.
slidesToShow = Math.min(slidesToShow, $slides.length);

$('.category-gallery').slick({
    // You can find the full code below on this page.
});

名为 slick-cloned-2 的 CSS class 只是为了区分幻灯片与原始幻灯片。您可以重命名它，但不要使用 slick-cloned 因为 Slick 使用它。或者，如果您不想，就不要添加它..

但是由于我们手动克隆了幻灯片，因此我们需要如下所示调整幻灯片索引，该索引用于突出显示项目过滤器中的幻灯片链接 - 例如this page 上“航空公司”标题下方的链接:

$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var i = currentSlide >= slidesToShow ? currentSlide - slidesToShow : currentSlide;
    ...
  $('a.category-nav[data-slide=' + (i + 1) + ']').addClass('highlighted-cat-nav');
});

这是我使用的完整代码:

// Category gallery

// Set preferred slidesToShow
var slidesToShow = 3; // always 3

// Clone the slides.
var $slides = $('.category-gallery .slide');
if ($slides.length > 1 && $slides.length <= slidesToShow) {
    var $slide;
    $slides.each( function(){
        $slide = $(this).clone(true)
            .insertAfter( $slide || $slides.last() )
            .addClass('slick-cloned-2')
            .attr('id', '');
    });
}

// If the total number of slides is less than 3, we set this to the
// total number of slides - i.e. either 2 or 1. But of course, the
// 3-slides centerMode effect won't happen anymore.
slidesToShow = Math.min(slidesToShow, $slides.length);

$('.category-gallery').slick({
    dots: false,
    infinite: true,
    slidesToShow: slidesToShow,
    slidesToScroll: 1,
    autoplay: false,
    pauseOnHover:false,
    focusOnSelect: false,
    centerMode:true,
    arrows: true,
});

$('a.category-nav[data-slide]').click(function(e) {
    e.preventDefault();
    var slideno = $(this).data('slide');
    $('.category-gallery').slick('slickGoTo', slideno - 1);
});

$('a.category-nav[data-slide="1"]').addClass("highlighted-cat-nav");
$('.category-gallery').on('afterChange', function(event, slick, currentSlide, nextSlide){
    var i = currentSlide >= slidesToShow ? currentSlide - slidesToShow : currentSlide;
    $('a.category-nav').removeClass('highlighted-cat-nav');
  $('a.category-nav[data-slide=' + (i + 1) + ']').addClass('highlighted-cat-nav');
});

<小时/>

您可以尝试的其他选项:

• 当幻灯片总数为 3 时，在最后一张幻灯片后添加一个空 .slide 元素。然后，例如， Hook beforeChange Slick 事件，并相应地移动幽灵幻灯片 - 或者更改其 HTML，以便幻灯片显示“正确的”项目。

• 更改/覆盖 Slick.prototype.setupInfinite() 函数..

但是我建议的克隆方法(并经过尝试和测试)会给您带来最平滑的效果.. 只是，幻灯片/项目被克隆两次 - 由我们/您手动克隆，然后由 Slick 克隆。