Question

我正在使用slick carousel，我认为这是一个非常好的库。

但是，我正面临着我需要实现的模板的问题。

基本上，我需要光滑的旋转木马显示部分下一张和上一张幻灯片（可以在光滑初始化时添加一些属性），但问题是我需要我的旋转木马具有特定的尺寸。

因此，旋转木马需要放在一个1200px的盒装div中（主滑块需要1200宽度，并保持高度为自动，以便我不会变形）并且部分滑块可以延伸到边缘屏幕。

以下是代码笔的快速示例（2种方法，因此请检查注释以查看它们）：https://codepen.io/nickimola/pen/xrRraW

标记：

HTML

<div class="carousel-container">
  <img src="https://unsplash.it/960/442/?image=0" />
  <img src="https://unsplash.it/960/442/?image=10" />
  <img src="https://unsplash.it/960/442/?image=11" />
</div>

减去css

.carousel-container {
  width: 100%;
  margin: 0 auto;
  height: 442px;
  img {
    max-width:1200px;
  }
}

的CoffeeScript

$(document).ready ->
  $('.carousel-container').slick({
    infinite: true,
    centerPadding: '60px',
    slidesToShow: 1,
    slidesToScroll: 3,
    centerMode: true,
    autoplay: true,
    autoplaySpeed: 5000
  })

显然，解决方案需要干净且没有任何问题（修改库文件不是解决方案。

我也在使用bootstrap，如果它可以帮助一点。

感谢您的任何帮助或建议

Answer 1

好的家伙，我想我明白了。

这是更新后的代码：

<强> HTML

<div class="carousel-container">
  <img src="https://unsplash.it/1200/442/?image=0" />
  <img src="https://unsplash.it/1200/442/?image=10" />
  <img src="https://unsplash.it/1200/442/?image=11" />
</div>

<强> LESS

img{
    max-width:1200px;
    width:1200px;
}

.slick-slide{
    opacity: 0.6;
    &.slick-current{
        opacity: 1;
    }
}

<强>的CoffeeScript

$(document).ready ->
  $('.carousel-container').slick({
    infinite: true,
    centerPadding: '60px',
    slidesToShow: 1,
    slidesToScroll: 1,
    centerMode: true,
    autoplay: true,
    autoplaySpeed: 5000,
    variableWidth: true // This one did the trick!
  })

显然，事实证明，如果我允许光滑属性具有可变宽度，则可以使用CSS正确指定宽度。

如果您现在查看示例，您可以看到我的意思：https://codepen.io/nickimola/pen/xrRraW

光滑的旋转木马 - 在盒装div内显示旋转木马

1 个答案: