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

如何解决活动幻灯片上的Slick.js边距

我正在使用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;
}

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

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

解决方法

我模仿了它，将所有幻灯片缩放为50％，将活动幻灯片缩放为100％。另外，将内部div添加到类.slide中，以便我们可以对其进行转换。这样，我们就不会干扰平滑的计算。

您可以根据需要使用比例值进行缩放。

$(".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>