javascript - 不能通过 slick slider 实现这种类型的滑块

Question

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

标签： javascripthtmlcss

Answer 1

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

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