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

【问题标题】：Show half of next slide without Center Mode in Slick Slider在 Slick Slider 中显示没有中心模式的下一张幻灯片的一半
【发布时间】：2017-01-28 01:01:54
【问题描述】：

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

【问题讨论】：

标签： jquery slick.js

【解决方案1】：

无需添加“slidesToShow: 3.5 选项”

只需调用 slick:-

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

并添加以下 CSS：

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

你可以给右边或百分比一个固定的填充。

【讨论】：

感谢阿卜杜勒！更清洁的解决方案。
这样可以节省时间。上帝保佑你。
谢谢。但是请注意，如果您通过检查器直接在浏览器中添加样式，它将不起作用，以防您尝试对其进行测试。您需要将其放在浏览器加载的文件中。
.slick-list{padding:0 20% 0 0 !important;} 为我工作。作为流畅的功能，它自己将padding:0; 添加到覆盖我们的css 的.slick-list 类中。

【解决方案2】：

你可以这样做slidesToShow: 3.5 和infinite: false。最右边的幻灯片将显示一半。

【讨论】：

infinite: false 成功了，我在这个问题上敲了一段时间！
我刚试过这个，它显示了上一张幻灯片的一半，而不是下一张。

【解决方案3】：

您也可以通过在 slick init 中添加这两个参数来在 slick 中执行此操作：

centerMode: true,
centerPadding: '20%',

这相当于

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

【讨论】：

这很好，但请注意，问题要求此布局而不使用 centerMode。
它不能等于 0 20% 0 0，因为在你的情况下你可以看到左右滑动。而在 0 20% 0 0 - 只对了。

【解决方案4】：

请注意不要使用带小数位的slidesToShow。

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

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

【讨论】：

【解决方案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;
}

【讨论】：

【解决方案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" 与此方法不兼容，因为预览幻灯片的内容在它们位于中心之前不会被加载。

【讨论】：