活动幻灯片上的 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>