我想用 SLICK 滑块实现下图所示的幻灯片设计

Question

我想实现与图片相同的设计。我可以做设计，但是每当我使用光滑的滑块给左右间隙提供间隙时，对齐就会变得疯狂。有人可以帮忙吗？

这里是代码

var $st = $('.pagination');
var $slickEl = $('.center');

$slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $st.text(i + ' of ' + slick.slideCount);
});

$slickEl.slick({
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 3,
  focusOnSelect: true,
  dots: false,
  infinite: true,
    speed: 300,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

.slide-container{
    position: relative;
    margin: 0 auto;
    padding: 100px 0;
}

.slick-active { 
  padding: 20px 0; 
}

.slick-center { 
  transform: scale(1);
    opacity: 1 !important;
}

.slick-slide:not(.slick-active) { 
  margin: 20px 0; 
}

.child { 
  width:100%; 
}

.slide:not(.slick-active) { 
  cursor: pointer; 
}

.pagination {
  text-align: center; 
  color: #000;
  font-size: 1.2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>

<div class="slide-container">
      <div class="slider center">       
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="1">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="2">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="3">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="4">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="5">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="6">
          </div>

      </div>
      <div class="pagination"></div>
</div>

每次我向当前幻灯片添加填充或边距时，它都会中断。好像我错过了什么。

Answer 1

我建议您仅在显示导航时才对幻灯片进行样式化：

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

你会得到这样的结果：

$(document).on('ready', function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 3
  });
});

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

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

.slick-slide img {
  width: 100%;
  transform: scale(0.9);
}

.slick-prev:before,
.slick-next:before {
  color: black;
}

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<section class="center slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=7">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=8">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=9">
  </div>
</section>
<section class="center slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
</section>

Answer 2

使用边距而不是填充来实现间隙。

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