slick текстовые dots

198

31 марта 2019, 08:50

как изменить стандартные dots на текст (подпись слайда). То есть - при нажатии на cat 2 переключается на второй слайд, и т.д Количество слайдов и текст будет меняться.

$('.slider').slick({ 
  dots: true, 
  infinite: true, 
  speed: 300, 
  slidesToShow: 1, 
  adaptiveHeight: true 
});

.slider-dots__item.active{ 
color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet"/> 
 
<div class="slider"> 
<div> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTllYQ_g_GV26zcpARW9lG8d_fVwVxqEDFx3xvTC6FKL9YVPcCl" /> 
</div> 
<div> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> 
</div> 
<div> 
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> 
</div> 
</div> 
 
<div class="slider-dots"> 
  <div class="slider-dots__item active"> 
      Cat 1 
  </div> 
  <div class="slider-dots__item"> 
      Cat 2 
  </div> 
  <div class="slider-dots__item"> 
      Cat 3 
  </div> 
</div>

Answer 1

Как написано в документации, что бы переключиться на нужный слайд нужно воспользоваться методом slickGoTo.

Посмотрите пример.

$('.slider').slick({ 
  dots: true, 
  infinite: true, 
  speed: 300, 
  slidesToShow: 1, 
  adaptiveHeight: true 
}); 
 
$('.slider-dots .slider-dots__item').click(function() { 
  var $this = $(this); 
  $('.slider').slick('slickGoTo', $this.data('index')) 
});

.slider-dots__item.active { 
  color: blue; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script> 
<link href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" rel="stylesheet" /> 
 
<div class="slider"> 
  <div> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTllYQ_g_GV26zcpARW9lG8d_fVwVxqEDFx3xvTC6FKL9YVPcCl" /> 
  </div> 
  <div> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> 
  </div> 
  <div> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSar7YDMGRXxGZH-zC-kCBdEcXDaFSfeUGAcGnOW-4Mh0-B8N3j0w" /> 
  </div> 
</div> 
 
<div class="slider-dots"> 
  <div class="slider-dots__item active" data-index="1"> 
    Cat 1 
  </div> 
  <div class="slider-dots__item" data-index="2"> 
    Cat 2 
  </div> 
  <div class="slider-dots__item" data-index="3"> 
    Cat 3 
  </div> 
</div>