光滑的滑块 centerMode

Question

我一直在试图创造一些像这样使用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>

Answer 1

一点点 CSS 应该可以帮助你：

 $('.slider').slick({ centerMode: true, centerPadding: '30px', slidesToShow: 3 });

 .slick-slide > div { transform: scale(.5); transition: transform .3s cubic-bezier(.4,0,.2,1); } .slick-center > div { transform: scale(1); } .slider__item > img { width: 100%; height: auto; }

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

原理很简单：使用transform: scale(n)缩小所有幻灯片（其中n是您想要的因子 - 在上面的示例中为.5 ）。 在居中的（具有.slide-center类transform:scale(1)上使用transform:scale(1)以实际比例 (1:1) 呈现它。
并在transform上添加transition 。

完毕。