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

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初始化中添加以下两个参数，在slick中执行此操作：

centerMode: true,
centerPadding: '20%',

这相当于

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

Answer 4

请注意使用slidesToShow小数位。

根据官方文档 slidesToShow是 typeint而不是float. 将它用作 float 会导致不可预测的breakpoint事件异常（当您指定了自定义断点选项时）。

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