无法通过光滑的 slider 实现这种类型的 slider

Question

我尝试使用 slick slider，但我如何理解 Slick 没有特殊设置来创建该效果，当活动图像超过另一个具有另一个负边距时这是 figma 中的示例，有什么方法可以 select z-index 到中心图像，就像这里的图像？？？

Answer 1

在centerMode上使用.slick-center 。 一个这样的：

.slick-active.slick-center {
     z-index: 1;
     position: relative;
}

 $('.center').slick({ centerMode: true, centerPadding: '60px', slidesToShow: 3, focusOnSelect: true, responsive: [ { breakpoint: 768, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 3 } }, { breakpoint: 480, settings: { arrows: false, centerMode: true, centerPadding: '40px', slidesToShow: 1 } } ] });

 .center.slick-center h3 { -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); -webkit-transform: scale(1.08); opacity: 1; transform: scale(1.15); border: 3px solid red; color: red; background: #fff; }.slick-active.slick-center { z-index: 1; position: relative; }.center h3 { opacity: 0.4; transition: all 300ms ease; text-align: center; line-height: 100px; border: 3px solid #000; color: #333; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" integrity="sha512-17EgCFERpgZKcm0j0fEq1YCJuyAWdz9KUtv1EjVuaOz8pDnh/0nZxmU6BBXwaaxqoi9PQXnRWqlcDB027hgv9A==" crossorigin="anonymous" /> <div class="slider center"> <div> <h3>1</h3> </div> <div> <h3>2</h3> </div> <div> <h3>3</h3> </div> <div> <h3>4</h3> </div> <div> <h3>5</h3> </div> <div> <h3>6</h3> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>