JSFiddle - React, Tailwind, and code Playground

by chridam

HTML

<a href="#" id="" class="left-arr pull-left"><img src="img/left.png" /></a>
<div class="carousel-in pull-left col-md-10">
    <ul>
        <li class="content-show"><div>Content goes here - 1</div><div>Even more content</div></li>
        <li class="content-hide"><div>Content goes here - 2</div><div>Even more content</div></li>
        <li class="content-hide"><div>Content goes here - 3</div><div>Even more content</div></li>
        <li class="content-hide"><div>Content goes here - 4</div><div>Even more content</div></li>
    </ul>
</div>
<a href="#" class="pull-right right-arr"><img src="img/right.png" /></a>

JavaScript

//Next link is clicked
$(".right-arr").on("click", function() {


    var currentLi = $(".content-show");
    var nextLi = currentLi.next();


    if (nextLi.length == 0) {
        nextLi = $(".carousel-in li").first();
    }

    currentLi.removeClass("content-show").addClass("content-hide").
    css("z-index", -10);
    nextLi.addClass("content-show").removeClass("content-hide").
    css("z-index", 20);

    //Set the Z-index of other li to 1 except for current and next li
    $("carousel-in li").not([currentLi, nextLi]).css("z-index", 1);

    return false;
});

//Previous link is clicked
$(".left-arr").on("click", function() {


    var currentLi = $(".content-show");
    var prevLi = currentLi.prev();


    if (prevLi.length == 0) {
        prevLi = $(".carousel-in li").last();
    }

    currentLi.removeClass("content-show").addClass("content-hide").
    css("z-index", -10);
    prevLi.addClass("content-show").removeClass("content-hide").
    css("z-index", 20);

    //Set the Z-index of other li to 1 except for current and previous li
    $("carousel-in li").not([currentLi, prevLi]).css("z-index", 1);

    return false;
});