自定义全宽Slick-Slider

Question

我试图使用光滑的http://kenwheeler.github.io/slick/来构建一个特殊的全宽旋转木马。
在Section的中间是当前显示的幻灯片。左右你应该看到前一张（上一张）和下一张（下一张）幻灯片的一小部分 我设法创建了一个朝这个方向发展的版本。但你应该看到更多的上一个和下一个滑块 这是一张它应该如何看待结尾的图片：

示例图2：

这是我第一次尝试的CodePen示例：
https://codepen.io/Robocop/pen/BpbMKQ

这是我的HTML代码：

    <section class="top_slider">
    <div>
        <img src="http://placehold.it/1300x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/1300x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/1300x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/1300x300?text=1">
    </div>
    <div>
        <img src="http://placehold.it/1300x300?text=1">
    </div>
</section>

Heres是JS代码：

    $(".top_slider").slick({
    dots: false,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    //arrows: false,
    prevArrow: '<button type="button" data-role="none" class="slick-prev slick-arrow" aria-label="Previous" role="button" style="display: block;">Previous</button>',
    nextArrow: '<button type="button" data-role="none" class="slick-next slick-arrow" aria-label="Next" role="button" style="display: block;">Next</button>'
});

最后是CSS代码：

 .slider {
   background-color: white;
   margin: 100px auto;
   height: auto!important;
   }

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

 .slick-slide img {
 width: 100%;
 }

Answer 1

尝试在您的光滑初始化中添加：centerPadding: '220px'。调整数字以提供所需的间距。填充值越高，前一个和下一个图像将显示的越多。

Answer 2

要实现这一目标，您需要做的就是改变

slidesToShow: 1,

到

slidesToShow: 2,

在您的JavaScript文件中。