jQuery addClass example

Change class name on click in jQuery

by Danil Gudz

HTML

<!-- Animated carousel -->
                    <div class="steps-carousel">
                        <div class="step-container">
                            <div class="step-container__bg"></div>
                            <div class="steps">
                                <div class="step steps__step-1">THIS IS 1</div>
                                <div class="step steps__step-2">THIS IS TWWWWO</div>
                                <div class="step steps__step-3">AND 3</div>
                            </div>
                            <div class="step-container__mask"></div>
                            <div class="step-container__controls">
                                <div class="progress-line"></div>
                                <a href="" class="control-dot">&bull;</a>
                                <a href="" class="control-dot">&bull;</a>
                                <a href="" class="control-dot">&bull;</a>
                            </div>
                        </div>   </div>

CSS

.active{background:red;}
.control-dot{width:50px; height:50px;float:left; margin:10px;background:grey; font-size:22px;}

JavaScript

var duration = 5;
var lis = $('.step'),
    currentHighlight = 0;
var intervalId = null;
$(function() {
  $('.steps__step-1').addClass('active');
  runCarousel();
});

$('.control-dot').on('click', function(e) {
  e.preventDefault();
  $('.active').removeClass('active');
  var itemNo = $(this).index() - 1;
  $('.step').eq(itemNo).addClass('active');
  rerunCarousel();
});

function rerunCarousel() {
  if(intervalId) clearInterval(intervalId);
  intervalId = null;
  runCarousel();
}

function runCarousel() {
  intervalId = setInterval(function() {
    currentHighlight = (currentHighlight + 1) % lis.length;
    lis.removeClass('active').eq(currentHighlight).addClass('active');
  }, N * 1000)
}