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=".3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare/ajax/libs/slick-carousel/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href=".8.1/slick-theme.css" />
<link rel="stylesheet" href=".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=".png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src=".png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src=".png" alt="" width="200px">
        </div>
      </div>
    </div>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./ajax/libs/slick-carousel/1.5.0/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/slick-carousel/1.8.1/slick-theme.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare./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./wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src="https://demo.plugins360./wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
      <div>
        <div class="quote-image">
          <img src="https://demo.plugins360./wp-content/uploads/2017/12/demo.png" alt="" width="200px">
        </div>
      </div>
    </div>

• javascript
• css
• slider
• slick.js

Share Improve this question Follow edited Nov 12, 2020 at 17:43 Ed Lucas 7,36544 gold badges4040 silver badges5050 bronze badges asked Nov 12, 2020 at 9:30 Arshad ArsalArshad Arsal 11511 silver badge1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

set slidesToShow: 2.99 that's my answer

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.