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

Posted 2021-04-07

我正在尝试使用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>

答案

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

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