0

как изменить стандартные 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/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/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>

1 ответ 1

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/[email protected]/slick/slick.min.js"></script>
<link href="//cdn.jsdelivr.net/npm/[email protected]/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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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