Track index on click and apply to corresponding slide

by Tyler N.

HTML

<div class="carousel">
    <ul>
        <li class="slide active">Slide 1</li>
        <li class="slide active">Slide 2</li>
        <li class="slide active">Slide 3</li>
        <li class="slide active">Slide 4</li>
    </ul>
    <div class="carousel-nav">
        <span class="active">Btn 1</span>
        <span>Btn 2</span>
        <span>Btn 3</span>
        <span class="main-content">Btn 4</span>
    </div>
</div>

CSS

.slide.active {
    color: red;
}

.carousel-nav span {
    cursor: pointer;
    display: inline-block;
}

.carousel-nav .active {
    color: red;
}

JavaScript

$(function () {

    $('.carousel-nav span').on('click', function () {
        var cl_btn = $('.carousel .carousel-nav span');
        var cl_btn_index = cl_btn.index($(this));
        var slide = $('.carousel ul .slide');

        cl_btn.removeClass('active');
        $(this).addClass('active');

        slide.prevAll().removeClass('active');
        slide.eq(cl_btn_index)
            .nextAll()
            .andSelf()
            .addClass('active');
    });


});