Question

我想要的是一个滑块，一次显示3.5张幻灯片，最右侧的幻灯片是仅显示一半的幻灯片。我已经看到使用带有光滑滑块的centerMode和centerPadding成功完成了这样的事情，但我不希望幻灯片居中。换句话说，我希望最左边的幻灯片与窗口的一侧齐平，完全在视野中，但最右边的滑动是窗口的一半，半关闭。光滑可能吗？我见过人们使用slideToShow：3.5，但是这使得最左边的幻灯片离屏幕一半，我需要它在右边。

Answer 1

无需添加“slidesToShow：3.5选项”

只需拨打电话： -

$('.Your-container').slick({
    arrows: false,
});

并添加以下CSS：

.slick-list{padding:0 20% 0 0;}

您可以向右或百分比提供固定填充。

Answer 2

您可以执行类似slidesToShow: 3.5的操作并制作infinite: false。最右边的幻灯片将显示一半。

Answer 3

您也可以通过在slick init中添加这两个参数来实现这一点：

centerMode: true,
centerPadding: '20%',

这相当于

.slick-list{padding:0 20% 0 0;}

Answer 4

请注意不要将slidesToShow与小数点一起使用。

根据Official Documentation slidesToShow属于int类型，而不是float类型。将其用作float会导致breakpoint事件（当您指定了自定义断点选项时）发生不可预测的异常。

您可以在Slick GitHub官方线程here，here中阅读有关这些问题的更多信息。

Answer 5

也许需要在CSS中添加重要内容。

这是我的JS代码：

$(this).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: true,
    infinite: true,
    arrows: true,
    dots: false,
    centerMode: true,
})

这是CSS代码：

.slick-list {
    padding:0 20% 0 0 !important;
}

Answer 6

我的用例有点不同，因为我想显示上一张和下一张幻灯片的部分，以及当前幻灯片和那些幻灯片之间的箭头。

到目前为止对我有用的是添加这些样式：

.slick-list {
  /* Show slides that would otherwise be hidden off-screen */
  overflow: visible;
}

.slick-slide:not(.slick-current) {
  /* Make slides other than the current one translucent */
  opacity: 0.4;
}

这是一项正在进行的工作，但这是我能找到的显示上一张和下一张幻灯片中的前一张的唯一方法。

可能值得注意的是，设置 lazyLoad: "ondemand" 与此方法不兼容，因为预览幻灯片的内容在它们位于中心之前不会被加载。

在Slick Slider中显示没有中心模式的下一张幻灯片的一半

6 个答案: