Question

我正在使用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进行了设置以进行演示。

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

我想知道的第二件事就是这个。我只想要在任何时候显示三个图像;中心一侧和一侧。但是，我希望左边的那个插入到另一列的文本中，所以基本上文本位于淡出图像的一部分之上。

这可能吗？

任何建议表示赞赏

由于

Answer 1

使此slideToShow值为5而不是3 像 -

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

这样可以正常工作。例如： - https://jsfiddle.net/z69w9u4g/40/

Answer 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张图像，您需要将容器宽度设置为600px（或取决于img大小）。

.container {
  width: 600px;
}

无论你想要什么“流入文字”我都不明白。

引导布局中的自定义滑块滑块

2 个答案: