在Slick Slider中不使用中心模式显示下一张幻灯片的一半。

Question

我想要的是一个滑动条，它每次显示3.5个幻灯片，最右侧的幻灯片仅显示一半。我曾经看到使用slick slider的centerMode和centerPadding成功实现了类似的功能，但我不想让幻灯片居中。换句话说，我希望最左边的幻灯片紧贴窗口边缘，并且完全可见，但最右边的幻灯片半在窗口内，半在窗口外。slick能做到吗？我看过一些人使用slidesToShow: 3.5，但这会使最左边的幻灯片半脱离屏幕，而我需要它在右边。

- Cook88

Answer 1

无需添加"slidesToShow: 3.5 option"

只需调用slick即可：

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

并添加以下CSS：

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

你可以给右侧设置固定的填充或百分比填充。

- Abdul Rahman

---

谢谢Abdul！解决方案更加简洁。 - Cook88

这真是一个时间节省器。愿上帝保佑你。 - Marios Pittas

谢谢。请注意，如果您尝试测试它，则不能直接通过检查器在浏览器中添加样式。 您需要将其放置在浏览器加载的文件中。 - Giuseppe

.slick-list{padding:0 20% 0 0 !important;} 对我很有效。因为Slick功能本身会向.slick-list类添加padding:0;，这会覆盖我们的CSS。 - Code_Art

Answer 2

您可以这样做：slidesToShow:3.5，并使infinite:false。最右边的幻灯片将显示一半。

- kophygiddie

---

infinite: false 就是解决方法，我为此苦恼了一段时间！ - Matteo Pieroni

我刚试了一下，它显示的是前一张幻灯片的一半，而不是下一张。 - lordZ3d

Answer 3

你也可以通过在Slick初始化时添加这两个参数来完成这个操作：

centerMode: true,
centerPadding: '20%',

这相当于

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

- Gcamara14

---

明白了，但请注意，问题要求在不使用 centerMode 的情况下实现这种布局。 - Cook88

它不能等同于0 20% 0 0，因为在您的情况下，您可以看到左右滑动。而在0 20% 0 0中，只有右侧。 - Aleksey Makas

Answer 4

请注意，不要在slidesToShow中使用小数。

根据官方文档，slidesToShow是int类型而不是float。如果将其用作float，则会在breakpoint事件（当您指定自定义断点选项时）发生不可预测的异常。

您可以在官方Slick GitHub主题这里和这里了解更多有关这些问题的信息。

- kosmeln

---

slidesToShow 的类型是整数。 - Drew Cordano

@DrewCordano 是的 - 这就是我在上面的评论中所说的 :) - kosmeln

Answer 5

也许需要在CSS中添加important。

这是我的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;
}

- Jay Gangkun

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"与此方法不兼容，因为预览幻灯片的内容只有在它们位于中心时才会被加载。

- Aaron