引导布局中的自定义光滑滑块答案

【问题标题】：Custom slick slider in bootstrap layout引导布局中的自定义光滑滑块
【发布时间】：2017-10-15 22:01:19
【问题描述】：

我正在使用Slick JS

我已经在一个非常简单的引导布局中设置了它

<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>

所以第一列是一些文本，然后滑块在第二列。我已经像这样设置了滑块，使用中心模式

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

我已经在JSFiddle 中设置了一些东西来演示。

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

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

这可能吗？

任何建议表示赞赏

谢谢

【问题讨论】：

标签： jquery twitter-bootstrap slick.js

【解决方案1】：

将此 slidesToShow 的值设为 5 而不是 3 喜欢-

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

这会很好。例如：-https://jsfiddle.net/z69w9u4g/40/

【讨论】：

这并没有解决我所追求的。我只想显示 3，我需要它渗入文本

【解决方案2】：

我更新了你的小提琴。

https://jsfiddle.net/z69w9u4g/42/

要修复不透明度，请将“slidesToShow: 5”和“infinite: true”设置为解决方法。

.slick-slide {
  opacity:0.6;
  transition:opacity 300ms ease-out;
}
.slick-center {
   opacity:1!important;
   transition:opacity 300ms ease-in;
}

要显示 3 张图片，您需要将容器宽度设置为 600 像素（或取决于图片大小）。

.container {
  width: 600px;
}

你想“渗入文本”我不明白。

【讨论】：