活动幻灯片上的 Slick.js 边距

Question

我正在使用 Slick 幻灯片。 我对活动幻灯片应用了比例 2，但是当幻灯片的大小发生变化时，左右边距不会移动。 我该如何解决？

我在活动幻灯片上发现边距的示例： https : //codepen.io/jinzagon/pen/KKzaQwz

我的代码： https : //codepen.io/jinzagon/pen/YzqpdLj

HTML

<section class="top_slider">
  <div>
    <a href="google.com"><img src="http://placehold.it/288x288?text=1"></a>
  </div>
  <div>
    <img src="http://placehold.it/288x288?text=2">
  </div>
  <div>
    <img src="http://placehold.it/288x288?text=3">
  </div>
  <div>
    <img src="http://placehold.it/288x288?text=4">
  </div>
  <div>
    <img src="http://placehold.it/288x288?text=1">
  </div>
</section>

CSS

.slider {
  background-color: white;
  margin: 100px auto;
  height: auto!important;
}

.slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 80%;
  transition: all linear 0.4s;
}

.slick-center img {
  transform: scale(2);
  transition: all linear 0.4s;
}

JS

$(".top_slider").slick({
  dots: true,
  infinite: false,
  centerMode: true,
  slidesToShow: 3,
  slidesToScroll: 1,
});

$('html').animate({
  scrollTop: $('.top_slider').offset().top
}, 500);

Answer 1

我已经通过缩放比例为 50% 的所有幻灯片和缩放比例为 100% 的活动幻灯片来模拟它。 此外，使用类.slide添加内部 div，以便我们可以在其上放置转换。 这样，我们就不会干扰光滑的计算。

您可以根据需要使用比例值。

 $(".top_slider").slick({ dots: true, infinite: false, centerMode: true, slidesToShow: 3, slidesToScroll: 1, }); $('html').animate({ scrollTop: $('.top_slider').offset().top }, 500);

 .slider { background-color: white; margin: 100px auto; height: auto!important; } .slide { transform: scale(.5); transition: transform linear 0.15s; } .slick-center .slide { transform: scale(1); } .slick-list { overflow: visible; } /* This should be included in your reset/normalize file */ img { max-width: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" /> <section class="top_slider"> <div> <div class="slide"> <img src="http://placehold.it/288x288?text=1"> </div> </div> <div> <div class="slide"> <img src="http://placehold.it/288x288?text=2"> </div> </div> <div> <div class="slide"> <img src="http://placehold.it/288x288?text=3"> </div> </div> <div> <div class="slide"> <img src="http://placehold.it/288x288?text=4"> </div> </div> <div> <div class="slide"> <img src="http://placehold.it/288x288?text=5"> </div> </div> </section>