我一直在尝试使用 slick.js 创建类似的东西，但我真的无法理解它。
我已经得到了当前的代码。如何使中心幻灯片图像的宽度和高度为 100% 并为幻灯片添加填充？它似乎不起作用。
我真的很感激任何帮助。谢谢。
$('.slider').slick({
centerMode: true,
centerPadding: '30px',
slidesToShow: 3,
adaptiveHeight: false
});.slick-slide img {
max-width: 100%;
transition: transform 0.5s;
}
.slick-slide.slick-center img{
transform: scale(2.1);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c849132/v849132998/45c5c/RSTineyyvfE.jpg" alt="">
</div>
</div>