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

Question

当我有一个this site使用centerMode: true变量时，我正在研究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()的{​​{3}}，则会看到以下条件：

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

这意味着，如果幻灯片总数（即.slide元素）小于或等于，则等于{{1} }选项，将克隆 not 幻灯片，并且slidesToShow滚动效果将 not 如预期的那样发生。

因此，根据centerMode滚动效果，您的代码实际上可以工作；但是，要获得正确的效果-始终可见3个项目/幻灯片，并且一次只滚动一个项目/幻灯片，而活动的项目/幻灯片处于居中状态，则可以按以下方式手动克隆幻灯片（centerMode）：如下所示：

.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会使用它。或者，如果不想的话，也不要添加它。.

但是，由于我们手动克隆了幻灯片，因此我们需要按以下方式调整幻灯片索引，以在项过滤器中突出显示幻灯片链接-例如， source标题“航空公司”下方的链接：

slick-cloned

这是我使用的完整代码：

$('.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'); }); 时，在最后一张幻灯片之后添加 empty .slide元素。然后，例如，钩住3 Slick事件，并相应地移动幻像幻灯片-或更改其HTML，以使幻灯幻灯片显示“正确”项目。

• 更改/覆盖beforeChange函数。

但是我建议的克隆方法（并经过尝试和测试工作）将为您带来最流畅的效果。仅此，幻灯片/项目被克隆了两次-由我们/您手动进行，然后由Slick稍后进行。