Slick - 禁用滑块转到第一张和最后一张幻灯片答案

【问题标题】：Slick - Disable slider going to first and last slideSlick - 禁用滑块转到第一张和最后一张幻灯片
【发布时间】：2019-08-09 15:03:56
【问题描述】：

我需要自定义光滑的滑块，使其从幻灯片 2 开始并向上移动到幻灯片 n-1。由于它不会自动滚动，因此用户只能向左或向右滑动到幻灯片。

例如，我们有 5 张幻灯片 1, 2, 3, 4, 5。当页面加载时，第一张可见的幻灯片应该是编号2。如果用户尝试向右滑动，他应该无法滑动1。

如果用户在n-1 幻灯片上并尝试向左滑动，他应该无法转到最后一张幻灯片。

只是为了让我的目标更明确，这就是我想要做的事情。我在其中展示了下一张和上一张幻灯片的一半。所以，当用户登陆页面时，他会看到一半的slide 1，完整的slide 2和一半的slide 3。

我试图找到很多解决方案，但没有成功。

【问题讨论】：

在深入了解 docs 之后，我认为您不能禁用在特定幻灯片上滑动（使用库设置），要实现这一点，您可以使用自定义 javascript 代码。
是的，我猜到了。你能建议我使用 jQuery 这样做的技术吗？

标签： jquery slider swipe slick.js

【解决方案1】：

您可以设置slidesToShow: 3 和centerMode: true。然后使用 css 减少导致其他幻灯片被隐藏的侧面的边距，以覆盖幻灯片 1 和 3 的部分内容。

这将导致幻灯片 2 居中，幻灯片 1 和 3 部分显示。

【讨论】：

【解决方案2】：

找到问题的解决方案。这是我的做法。

在 slick 中，我使用 slidesToShow: 3 而不使用 centerMode

现在，这里是 jQuery Magic。

当我们设置 slidesToShow 等于 3 时，滑块可见区域分为 3 个块。但我们的要求是 1/2 + 1 + 1/2 块应该在屏幕上可见
所以，我们将滑块可见宽度增加到windowWidth + (windowWidth / 2)
滑块主容器宽度设置为屏幕的 100%，overflow: hidden;
现在，您只会在屏幕上看到 2 张幻灯片。为了让它成为我们的方式，我们将 x 轴上的滑块转换为 -(windowWidth / 4)

就是这样。这是jQuery代码。

$(".slider").slick({
    arrows:         false,
    autoplay:       false,
    autoplaySpeed:  4500,
    infinite:       false,
    pauseOnFocus:   false,
    pauseOnHover:   false,
    slidesToShow:   3,
    slidesToScroll: 1,
});
var winWdth = $(window).width();
var sliderWidth = winWdth + (winWdth / 2);
$('.slider').width(sliderWidth);
$('.slider').css({'transform' : 'translateX(-' + winWdth / 4 + 'px)'});

【讨论】：

这将隐藏您的第一张和最后一张幻灯片。如果 scrolltoslide 为 1，则并非所有幻灯片都需要显示。