Изменение цифры слайда (slick)

226

29 сентября 2018, 08:20

В слайдере есть 8 слайдов. Нужно сделать так, чтобы при переключении слайдера менялась цифра (тоесть увеличивалась на 1).

Answer 1

$('.slider').on(`init reInit`, function(event, slick) { 
  $('.counter').text(1 + ' / ' + slick.slideCount); 
}) 
$('.slider').on(`afterChange`, function(event, slick, currentSlide, nextSlide) { 
  $('.counter').text(currentSlide + 1 + ' / ' + slick.slideCount); 
}) 
$('.slider').slick({ 
  slidesToShow: 3, 
  dots: false 
});

* { 
  box-sizing: border-box; 
} 
 
body { 
  margin: 0; 
} 
 
.slide { 
  border: 1px solid; 
  padding: 80px 0; 
  text-align: center; 
  font-size:25px; 
  font-weight:900; 
  background: linear-gradient(yellow, orange); 
}

<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 class="slide">1</div> 
  <div class="slide">2</div> 
  <div class="slide">3</div> 
  <div class="slide">4</div> 
  <div class="slide">5</div> 
  <div class="slide">6</div> 
  <div class="slide">7</div> 
</div> 
<div class="counter"></div>

Answer 2

Не видя верстку и прикрученный код дам ответ в общем виде:

У слайдера slick.js есть события, в частности, вы можете использовать afterChange, которому на вход вторым аргументом передается currentSlide, обозначающий номер слайда. А дальше уже дело за малым — ставите это значение в нужное вам место с помощью javascript обработчика события смены слайда.