Question

所以我尝试了很多方法。我想要实现的是我只有3张幻灯片，但也显示3张幻灯片。每当我放slidesToShow: 3时，滑块就会停止工作并且箭头被隐藏。

我的代码如下。请帮忙。

$('.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

如果只有3张幻灯片和slidesToShow: 3，则没有滚动内容。如果幻灯片不完全可见，则可以尝试删除centerMode: true设置。

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

如果您希望滚动而不考虑计数，则可以尝试设置infinite: true。

Answer 2

设置幻灯片显示：2.99 这就是我的答案

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

2 个答案: