从左偏移开始的光滑滑块

Question

我正在开发一个基于 bootstrap 的模板。我需要设置一个全宽滑动滑块，但它的初始状态应该从内容容器的左边缘开始，然后逐渐向左滑动。

我试图在下图中表示需要发生的事情。黑色边框代表视口，红色边框代表内容容器。第一行是初始状态，另外两行是点击“prev”箭头后滑块的位置：

这可能吗？如果是，怎么做？

谢谢，

Answer 1

大声笑，我上周刚做了同样的事情。我设置了 slidesToShow:1 和 slidesToScroll:1。我也有 variableWidth:false，但我不确定是否有影响。

下一步是在 CSS 中设置幻灯片的宽度，以防止它们调整大小以填充 space:

JS

$('.slider').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    variableWidth: false
}

CSS

/*Just to make it not full width, for this example*/
.slider{
    width:800px;
    margin:0 auto;
}

/*Edit, forgot this important bit.  This keeps the other slides visible*/
.slick-list {
    overflow: visible;
}

.your_slide {
    width: 280px!important;
    height: 345px!important;
}

从左偏移开始的光滑滑块

Slick slider starting with a left offset

javascript

css

slick.js