Question

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

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

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

为了使我的目标更加明确，这就是我想要做的。我在其中显示下一张和上一张幻灯片的一半。因此，当用户登陆页面时，他将看到slide 1的一半，slide 2的全部和slide 3的一半。

我试图找到很多解决方案，但是没有运气。

Answer 1

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

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

Answer 2

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

http://g.co/dev/maps-no-account

在光滑的情况下，我使用了slidesToShow: 3，而没有centerMode

现在，这是jQuery Magic。

当我们将slidesToShow设置为3时，滑块的可见区域将分为3个块。但是我们的要求是1/2 +1 + 1/2块应该在屏幕上可见
因此，我们将滑块的可见宽度增加到windowWidth + (windowWidth / 2)
使用overflow: hidden;，将滑块主容器宽度设置为屏幕的100％
现在，您将在屏幕上仅看到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)'});

光滑-禁用滑块到第一张和最后一张幻灯片

2 个答案: