Slick Slider: недостаточно слайдов для прокрутки

Question

Есть slick-слайдер с параметрами slidesToShow: 3, slidesToScroll: 1. Если слайдов больше трёх, то всё работает корректно:

$('.slider').slick({
  infinite: true,
  speed: 1500,
  slidesToShow: 3,
  slidesToScroll: 1
})

.slide {
  padding: 30px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
</div>

Но если оставить только три слайда, пропадают элементы управления и прокрутка блокируется:

$('.slider').slick({
  infinite: true,
  speed: 1500,
  slidesToShow: 3,
  slidesToScroll: 1
})

.slide {
  padding: 30px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

Можно ли заставить slick-слайдер прокручивать то количество слайдов, которое дано к показу? Или придётся использовать другой слайдер?

Answer 1

Можно попробовать при недостатке слайдов клонировать имеющиеся и добавить их в слайдер

$('.slider').on('init reInit',function(e,slick){
  if(slick.slideCount<=slick.options.slidesToShow){
    slick.slickAdd(slick.$slides.clone())
  }
})
$('.slider').slick({
  infinite: true,
  speed: 500,
  slidesToShow: 3,
  slidesToScroll: 1
})

.slide {
  padding: 30px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
</div>

БЛОГ НА HUSL

Slick Slider: недостаточно слайдов для прокрутки

Ответы (1 шт):