jquery - Bootstrap 布局中的自定义光滑 slider

Question

我正在使用Slick JS

我已经将其设置为一个非常简单的 Bootstrap 布局

<section id="inside" class="section">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <h3>Some title</h3>
        <p class="section-subtitle">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        </p>
      </div>
      <div class="col-md-8">
        <div class="slider center">
          <div class="preview-carousel">
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
            <div class="item"> <img src="http://www.al-akaria.com/wp-content/uploads/2016/02/Placeholder-Vertical.jpg" class="img-fluid"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

因此，第一列中是一些文本，然后 slider 位于第二列中。我已经像这样设置了 slider ，使用中心模式

$('.preview-carousel').slick({
    arrows: true,
    variableWidth: true,
    centerMode: true,
    centerPadding: '60px',
    slidesToShow: 3
});

我已经在 JSFiddle 中进行了设置来演示。

有一些事情我正在努力解决。我正在使用他们网站上的中心模式示例，但我使用图像而不是文本。因此，中心图像的不透明度高于其他图像，就像他们的示例一样。但是，一旦您滚动浏览图像并再次点击第一个图像，在再次将不透明度应用于第一个图像之前会稍有停顿。如果您向右单击六次，您可以在我的示例中看到这一点。在他们的例子中，他们没有这种延迟。我怎样才能阻止这种延迟的发生？

我想知道的第二件事是这个。我只想同时显示三张图像；中间一个，两边各一个。但是，我希望左侧的文本渗透到另一列的文本中，因此文本本质上位于淡出图像的一部分的顶部。

这可能吗？

任何建议表示赞赏

谢谢

Answer 1

将此 SlidesToShow 值设置为 5 而不是 3就像-

$('.preview-carousel').slick({
arrows: true,
variableWidth: true,
centerMode: true,
centerPadding: '60px',
slidesToShow: 5
});

这会工作得很好。示例:- https://jsfiddle.net/z69w9u4g/40/