1

В Swiper слайдере есть параметр - watchOverflow, который при значение true - скрывает стрелки, если мало слайдов. Есть ли аналог в slick slider?

2 ответа 2

0

Опции такой нет, но вы можете предварительно проверить количество слайдов и инициализировать слайдер только в том случае, если их количество достаточно.

if ( $('.slider-item').length >= 5 ) {
    $('.slider').slick();
}
0

В slick slider это реализовано. Если недостаточно слайдов, то стрелочки автоматически не появляются (всего 4 блока и slidesToShow: 4) :

$('.slider').slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  dots: false,
  infinite: true,
  responsive: [{
    breakpoint: 576,
    settings: {
      slidesToShow: 3,
    }
  }]
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

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

На меньшем разрешении уже 4 блока и slidesToShow: 3 - кнопки навигации появляются.

То же самое и для кастомных кнопок:

$('.slider').each(function() {

  var $this = $(this),
    $nav = $('#slick-nav'),
    $prev = $nav.find('.slick-prev'),
    $next = $nav.find('.slick-next');

  $(this).slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    dots: false,
    infinite: true,
    prevArrow: $prev,
    nextArrow: $next,
    responsive: [{
      breakpoint: 576,
      settings: {
        slidesToShow: 3,
      }
    }]
  });
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

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


<div id="slick-nav">
  <a href="#" class="slick-arrow slick-prev">
    < </a>
      <a href="#" class="slick-arrow slick-next"> > </a>
</div>

Либо уточните вопрос.

Ваш ответ

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

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