jQuery addClass example

Change class name on click in jQuery

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

/* Js for carousel */
    var stop = false
    $('.steps__step-1').addClass('active');
    $(function() {
        var lis = $('.step'),
            currentHighlight = 0;
            N = 5; // Duration in seconds
        setInterval(function() {
        	if (!stop) {
            currentHighlight = (currentHighlight + 1) % lis.length;
            lis.removeClass('active').eq(currentHighlight).addClass('active');
            }
        }, N * 1000);
        
    });

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