当显示的幻灯片总数和幻灯片总数相等并且滑块也不滑动时，隐藏滑动滑块箭头

Question

So I have tried many ways. What I'm trying to achieve is I only have 3 slides but show 3 slides also. Whenever I put slidesToShow: 3 the slider stops working and arrows hidden.

My code is below. Please help.

 $('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: false, asNavFor: '.slider-nav', initialSlide: 0, }); $('.slider-nav').slick({ slidesToShow: 3, slidesToScroll: 1, asNavFor: '.slider-for', dots: false, focusOnSelect: true, arrows: true, });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.0/slick.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" /> <div class="slider slider-for"> <div> <div class="quote"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4> </div> </div> <div> <div class="quote"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4> </div> </div> <div> <div class="quote"> <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</h4> </div> </div> </div> <div class="slider slider-nav"> <div> <div class="quote-image"> <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px"> </div> </div> <div> <div class="quote-image"> <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px"> </div> </div> <div> <div class="quote-image"> <img src="https://demo.plugins360.com/wp-content/uploads/2017/12/demo.png" alt="" width="200px"> </div> </div> </div>

Answer 1

If you only have 3 slides and slidesToShow: 3 , there's nothing to scroll. If the slides are not fully visible, you could try removing your centerMode: true setting.

$('.slider-nav').slick({
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    focusOnSelect: true,
    arrows: true,
});

If you want things to scroll regardless of the count, you could try setting infinite: true .

Answer 2

set slidesToShow: 2.99 这就是我的答案