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

【问题标题】："Layered" slider using slick.js使用 slick.js 的“分层”滑块
【发布时间】：2017-12-20 10:43:26
【问题描述】：

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

我在 stackoverflow 上找到了 solution，但仍然有一些问题。 There（jsfiddle 链接）我现在拥有的。问题是左右幻灯片被切断了。我尝试使用 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>

【问题讨论】：

标签： javascript css slider carousel slick.js

【解决方案1】：

我为以前的雇主解决了同样的问题。我仍然无法访问 repo，所以我无法分享确切的代码，但我发现的简单解决方案是增加中间图片的大小，直到它与我想要的左侧重叠。这将右边的图片推到了更右边，但我只是使用 CSS 将它带回来，直到它与左边的图片一样与中心图片重叠，然后调整右边的 z-index 直到它落在中间的图片后面。我在 CSS 中完成了这一切，只是查看了当我在 Chrome 开发工具中滚动图片时由 slick 添加的类。

我希望这有助于您走上正确的道路。很抱歉我无法提供任何具体的代码，但使用 Chrome 和 CSS 比较容易理解。

【讨论】：