全宽轮播滑块，带有上一个下一个部分图像

Question

我正在尝试创建一个滑块，其主图像约占屏幕的 60%，然后是上一个和下一个图像的 20%。这是一个例子http://www.qantumthemes.xyz/onair2/wpdemo/

我正在尝试使用光滑的滑块和此处的示例 https://kenwheeler.github.io/slick/ 在滑块同步下它具有选项 centerMode。问题是我似乎找不到设置上一张和下一张图像宽度的方法。

这是我目前使用光滑滑块的代码

.slider {
width: 50%;
margin: 100px auto;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

<section class="center slider">
<div>
<img src="1.jpg">
</div>
<div>
<img src="2.jpg">
</div>
<div>
<img src="3.jpg">
</div>
<div>
<img src="4.jpg">
</div>
</section>

Answer 1

我创建了这个小提琴，按照您的要求 https://jsfiddle.net/uqy8L69g/。

主要修复是将 variableWidth 初始化为 true 并设置幻灯片的宽度：

 .slick-slide {
    width: 2em;
 }

 .slick-active {
    width: 5.5em;
    border: .1em solid black;
 }

问题在于它在更改幻灯片时所做的奇怪动作。发生这种情况是因为 centerMode。它仅在滑动完成后才实现填充。为了解决这个问题，我会使用 onAfterChange 进行转换（你可以在这里阅读：https://github.com/kenwheeler/slick/issues/1005）。