Slick Slider先显示最后一个元素

Question

我想找出滑块的问题所在。当我设置 centerMode: true; 它显示的是最后一个元素，而不是第一个元素，如果我切换到 infinite: false; 它显示我的第一张幻灯片是空的。我需要 centerMode: true 所以我可以显示下一张幻灯片的一部分。

html:

        <div class="slider">
        <div class="col-12">1st</div>
        <div class="col-12">2nd</div>
        <div class="col-12">3rd</div>
        <div class="col-12">4th</div>
        </div>

JS:

        $(document).ready(function () {
              $('.slider').slick({
                centerMode: true,
                infinite: true,
                speed: 500,
                slidesToShow: 2,
            });
        });

更新。

似乎下面的代码（感谢 pc_coder)解决了最初的问题，但有一个新的问题，我也想有一个 dots: true; 可见 编码笔 它将第二个点设置为激活 slick-active 第一。

$(document).ready(function () {
    $('.slider').slick({
    dots: true,
    infinite: true,
    speed: 500,
    slide: 'div',
    centerMode: true,
    cssEase: 'linear',
    slidesToShow: 2,
    initialSlide:1
    });
});

编码笔

谢谢你了

Answer 1

添加 initialSlide:1, 然后从头开始

$(document).ready(function () {
    $('.slider').slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 1000,
        infinite: true,
        speed: 500,
        slide: 'div',
        centerMode: true,
        cssEase: 'linear',
        slidesToShow: 2,
        initialSlide:1
    });
});

.slider{
    width: 500px;
    margin: 0 auto;
}
.slider div{
  height:100px;
  background:gray;
  border:1px solid white;
  color:white
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet"/>
 <div class="slider">
        <div class="col-12">1st</div>
        <div class="col-12">2nd</div>
        <div class="col-12">3rd</div>
        <div class="col-12">4th</div>
 </div>