Slick slider сделать не активными кнопки или скрыть их

224

19 июля 2018, 01:50

Как скрыть или сделать неактивными кастомные кнопки слайдера, если мало слайдов для прокрутки? Кнопки сделал так

jQuery('.slick-list').before('<div class="slick-arrows"><div class="slick-prev slick-arrow"></div><div class="slick-next slick-arrow"></div></div>');
jQuery('.slick-prev').click(function(){
    jQuery('.slick-slider').slick('slickPrev');
});
jQuery('.slick-next').click(function(){
    jQuery('.slick-slider').slick('slickNext');
});

Answer 1

Если у вас не хвататает слайдов slick сам скрывает елементы навигации. И если вам нужны кастомные елементы для этого лучше использовать опции slick prevArrow и nextArrow

$('.js-slider').slick({ 
  slidesToShow: 4, 
  // slidesToScroll: 1, 
  // arrows: false, 
  prevArrow: $('.js-gallery-prev'), 
  nextArrow: $('.js-gallery-next'), 
  infinite: false, 
  dots: false, 
  autoplay: false, 
});

.container { 
  max-width: 800px; 
  margin: 0 auto; 
  padding: 0 30px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet" /> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet" /> 
<div class="container"> 
  <!-- Навигация для слайдера --> 
  <div class="slider-nav"> 
    <span class="slider-nav__arrow js-gallery-prev">PREV</span> 
    <span class="slider-nav__arrow js-gallery-next">NEXT</span> 
  </div> 
 <!-- /---/ --> 
  <div class="b-slider js-slider"> 
    <img src="https://placeholdit.co//i/500x250?text=1&fc=111111&bg=eaeaea"> 
    <img src="https://placeholdit.co//i/500x250?text=2&fc=111111&bg=eaeaea"> 
    <img src="https://placeholdit.co//i/500x250?text=3&fc=111111&bg=eaeaea"> 
    <img src="https://placeholdit.co//i/500x250?text=4&fc=111111&bg=eaeaea"> 
    <img src="https://placeholdit.co//i/500x250?text=5&fc=111111&bg=eaeaea"> 
  </div> 
</div>