jQuery addClass example

Change class name on click in jQuery

by arbuzzzi

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.4.0/slick.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<div class="slider">
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  <div>
    <div>Some content</div>
    <div class="slider-number"><span>1 2 3 4...</span></div>
  </div>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

.slider {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  /* width: 300px; */
}
.slider-number {
  text-align: right;
}

JavaScript

$('.slider').slick()

$('.slider').on('init reInit afterChange',
		function(event, slick, currentSlide){
			var status = $(this).find('.slider-number span');
			//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
			var i = slick.currentSlide;
			var slidesLength = slick.slideCount;
			var numberSlide1 = i + 1 <= slidesLength ? i + 1 : i - (slidesLength - 1);
			var numberSlide2 = i + 2 <= slidesLength ? i + 2 : i - (slidesLength - 2);
			var numberSlide3 = i + 3 <= slidesLength ? i + 3 : i - (slidesLength - 3);
			var numberSlide4 = i + 4 <= slidesLength ? i + 4 : i - (slidesLength - 4);

			status.html('<strong>'+numberSlide1+'</strong>' + ' ' +
				numberSlide2 + ' ' +
				numberSlide3 + ' ' +
				numberSlide4 + '...');
	});