滑块增加了中心滑块的宽度。 （滑块插件建议）

Question

我想在滑块的中心滑块宽度必须增加并且旁边的两个滑块保持在正常滑块上时创建滑块。

我已经尝试过使用光滑的滑块。

这是我尝试过的电笔链接。（Click here）

但这不是很平滑，并且中心幻灯片旁边的幻灯片无法正确显示。

如果有人知道一些更好的滑块可以做到这一点，请给我一个链接。

$('.slider').slick({
  slidesToShow: 3,
  centerMode: true,
  centerPadding: "0px",
  speed: 1000
  
});

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){

  $(slick).next().css({
    'margin-left':'auto'
  });
});

html,
body {
  background: #102131;
}
.slider {
  width: 1140px;
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  color: white;
}
.slider .slide {
  padding: 0px;
}
.slider .slide .child-element {
  transition: all .2s ease;
  background: #0c1c79;
  width: 100%;
  height: 800px;
  width: 300px;
}
.slider .slide .child-element .imgWrap img {
  width: 100%;
  max-width: 100%;
}
.slider .slide .child-element .desc {
  display: none;
}
.slider .slide.slick-active:last-chid .child-element {
  margin-left: auto;
}
.slider .slide.slick-center .child-element {
  background: rebeccapurple;
  -webkit-transform: translate(-70px, 0px);
          transform: translate(-70px, 0px);
  width: calc(100% + 140px);
  max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
  display: block;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css" rel="stylesheet"/>
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>
<div class="slider">
  <div class="slide">
    <div class="child-element">
       <div class="imgWrap">
         <img  src="https://www.scopecinemas.com/images/movie/dark900x12001.jpg" alt="">
      </div>
      <div class="text">Title1</div>
      <div class="desc">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="slide">
    <div class="child-element">
       <div class="imgWrap">
         <img  src="https://www.scopecinemas.com/images/movie/trans900x1200.jpg" alt="">
      </div>
      <div class="text">Title2</div>
      <div class="desc">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="slide">
    <div class="child-element">
       <div class="imgWrap">
         <img  src="https://www.scopecinemas.com/images/movie/mi900x1200.jpg" alt="">
      </div>
      <div class="text">Title3</div>
      <div class="desc">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="slide">
    <div class="child-element">
       <div class="imgWrap">
         <img  src="https://www.scopecinemas.com/images/movie/Venom900x1200.jpg" alt="">
      </div>
      <div class="text">Title4</div>
      <div class="desc">Lorem ipsum dolor</div>
    </div>
  </div>
  <div class="slide">
    <div class="child-element">
       <div class="imgWrap">
         <img  src="https://www.scopecinemas.com/images/movie/alpha900x1200.jpg" alt="">
      </div>
      <div class="text">Title5</div>
      <div class="desc">Lorem ipsum dolor</div>
    </div>
  </div>
</div>

Answer 1

请为子元素尝试使用此CSS：-

html,
body {
  background: #102131;
}
.slider {
  width: 1240px;
  margin: 20px auto;
  text-align: center;
  padding: 20px;
  color: white;
}
.slider .slide {
  padding: 0px;
}
.slider .slide .child-element {
  transition: all .5s;
  background: #0c1c79;
  width: 100%;
  height: 800px;
  width: 300px;
  transform-origin: top center;
  margin: 0 auto;
}
.slider .slide .child-element .imgWrap img {
  width: 100%;
  max-width: 100%;
}
.slider .slide .child-element .desc {
  display: none;
}
.slider .slide.slick-active:last-chid .child-element {
  margin-left: auto;
}
.slider .slide.slick-center .child-element {
  background: rebeccapurple;
    transform: scale(1.68);
  max-width: initial;
}
.slider .slide.slick-center .child-element .desc {
  display: block;
}