使用slick.js的“分层”滑块

Question

我正在尝试使用slick.js实现一个“分层的”滑块。enter image description here

我在stackoverflow上发现了一个solution，但仍然有一些问题。There (jsfiddle link)我现在所拥有的。问题是左右两张幻灯片都被切掉了。我试着用centerPadding增加填充，但不起作用。

​

$('.slider').slick({
  arrows: true,
  centerMode: true,
  infinite: true,
  centerPadding: '250px',
  slidesToShow: 1,
  speed: 500,
  dots: false,
});

.wrapper {
  width: 1170px;
  background: pink;
}
.content {
  width: 975px;
  margin: auto;
}
.slick-slide:not(.slick-center) {
  z-index: 0;
  transform: scale(0.7);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
  z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
  z-index: 2;
}
.slick-center {
  z-index: 3;
}
.slick-slide {
  position: relative;
  transition: transform 80ms;
}
.slider__item img {
  position: relative;
  transform: translateX(-50%);
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
  <div class="content">
  <div class="slider">
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
    </div>
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" /> 
    </div>
    <div class="slider__item">
      <img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
    </div>
  </div>
</div>
</div>

​

Answer 1

我为以前的雇主解决了同样的问题。我仍然不能访问repo，所以我不能分享确切的代码，但我找到的简单解决方案是增加中间图片的大小，直到它按我想要的方式与左边的图片重叠。这使右边的图片更靠右，但我只是用CSS把它带回来，直到它和左边的图片一样重叠在中间的图片上，然后调整右边的z索引，直到它落在中间的后面。当我在Chrome开发工具中滚动图片时，我只是看着slick添加的类，这一切都是在CSS中完成的。

我希望这能帮助你走上正确的道路。很抱歉我不能提供任何具体的代码，但是使用Chrome和CSS比较容易弄清楚。