全宽旋转木马滑块，上一个下一个部分图像

Question

我试图创建一个滑块，其主图像大约占屏幕的60％，然后是旁边的前一个和下一个图像的20％。以下是http://www.qantumthemes.xyz/onair2/wpdemo/

的示例

我试图在Slider Syncing下使用光滑的滑块和示例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）。