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

我试图创建一个滑块，其中主图像占屏幕的60%，然后是上一个和下一个图像的20%。这里有一个例子

我尝试使用slick slider和slider Synching下的示例，其中有选项centerMode。问题是我似乎找不到一种方法来设置上一张和下一张图片的宽度

这是我到目前为止使用slick slider的代码

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

滑块{
宽度：50%；
保证金：100像素自动；
}
.滑滑梯{
利润率：0px 20px；
}
.滑溜式img{
宽度：100%；
}

我创造了这把小提琴，它按照你的要求工作

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

 .slick-slide {
    width: 2em;
 }

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

---

问题在于它在换幻灯片时的怪异动作。这是因为centerMode。它仅在滑动完成后才执行填充。为了解决这个问题，我将使用onAfterChange（您可以在这里阅读：）来处理转换。

hmmm。。不确定这是否真的有帮助，你看到我包含的图像示例了吗？你的例子有5个可见，而我的例子有3个可见