当幻灯片多于 slidestoshow 变量时，光滑的滑块中心模式不起作用

Question

我正在研究使用 centerMode: true 变量的 this site at the moment where I have a Slick Slider。

我将我的 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

如果您查看 Slick.prototype.setupInfinite() 的 source，您会看到以下条件：

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

这意味着，如果幻灯片总数（即 .slide 个元素）小于或等于 slidesToShow 选项的值，幻灯片将 not 被克隆并且 centerMode 滚动效果将 not 发生为预期。

因此，就 centerMode 滚动效果而言，您的代码确实有效；然而，为了获得正确的效果 — 3 items/slides 始终可见并且一次只有一个 item/slide 滚动并且活动的幻灯片居中，您可以手动克隆幻灯片（.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.
});

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

但由于我们手动克隆了幻灯片，我们需要调整幻灯片索引，如下所示，用于突出显示[=中的幻灯片link 49=]项目过滤器——例如this page 上 "Airways" 标题下方的 links:

$('.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 时，在最后一张幻灯片后添加一个 empty .slide 元素。然后，例如，挂钩到 beforeChange Slick 事件，并相应地移动幽灵幻灯片 — 或者更改其 HTML 以便幻灯片显示 "proper" 项。
Alter/override Slick.prototype.setupInfinite() 函数..

但是我建议的克隆方法（并尝试和测试工作）会给你最流畅的效果。只是，slide/item 被克隆了两次 — 由 us/you 手动然后由 Slick 稍后提供。

当幻灯片多于 slidestoshow 变量时，光滑的滑块中心模式不起作用

Slick slider centermode not working when more slides than slidestoshow variable

jquery

slick.js