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

Question

I'm using a Slick slideshow. I applied a scale 2 to the active slide, but when the size of slide changes, the margins on the right and left don't move. How can I fix that?

An example where I found the margins working on active slide: https://codepen.io/jinzagon/pen/KKzaQwz

My code: 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

I have mimic it with scaling all the slides with scale of 50% and the active slide with scale of 100%. Also, add inner div with class .slide so we can place transformations on it. That way, we do not interfere with slick calculations.

You can play with the scale values to make it as you wish.

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