1

Есть 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-слайдер прокручивать то количество слайдов, которое дано к показу? Или придётся использовать другой слайдер?

1 ответ 1

4

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

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

2
  • Вариант интересный, спасибо! Есть в нём, правда, один недостаток - при dots: true количество точек в два раза больше чем нужно =)) Commented 3 июн. 2021 в 14:29
  • 1
    @humster_spb , угу. Можно конечно css-ом скрыть лишние li, но это уже явной костыльщиной отдаёт
    – zhurof
    Commented 3 июн. 2021 в 14:31

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.