JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="car-ctn">
    <div class="car"> <a href="" class="prev-arrow">&lt;</a>

        <div class="slide-1 active"></div>
        <div class="slide-2 next"></div>
        <div class="slide-3"></div>
        <div class="slide-4"></div>
        <div class="slide-5 last"></div> <a href="" class="next-arrow">&gt;</a>

    </div>
</div>

CSS

.process {
    background:#333;
}
.car-ctn {
    display:block;
    width:600px;
    height:200px;
    position:relative;
    overflow:hidden;
}
.car {
    display:block;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
}
.car>div {
    display:block;
    width:inherit;
    height:inherit;
    position:absolute;
    top:0;
    left:0;
    opacity:1;
    transition: opacity .3s ease;
    -webkit-transition: opacity .3s ease;
}
.slide-1 {
    background:blue;
}
.slide-2 {
    background:yellow;
}
.slide-3 {
    background:green;
}
.slide-4 {
    background:purple;
}
.slide-5 {
    background:red;
}
.active {
    z-index:5;
}
.in {
    z-index:4;
    opacity:1;
}
.out {
    opacity:0 !important;
}
a.next-arrow, a.prev-arrow {
    display:block;
    height:100%;
    width:20px;
    position:absolute;
    left:0;
    top:0;
    z-index:7;
    background:#333;
}
a.next-arrow {
    left:auto;
    right:0;
}

JavaScript

$(".car-ctn").each(function () {
    var slide1 = true,
        slide2 = false,
        slide3 = false,
        slide4 = false,
        slide5 = false,
        prevArrow = $(this).find('.prev-arrow'),
        nextArrow = $(this).find('.next-arrow');



    $(nextArrow).click(function (event) {
        if (slide1 === true) {
            $('.next').addClass('in');
            $('.last').removeClass('last');
            $('.active').addClass('out');
            setTimeout(function () {
                $('.active').addClass('last');
                $('.active').removeClass('out');
                $('.active').removeClass('active');
                $('.in').removeClass('next');
                $('.in').addClass('active');
                $('.in').removeClass('in');
                $('.slide-5').addClass('next');
            }, 300);
            var slide1 = false,
                slide2 = true;
        } else if (slide2 === true) {
            $('.next').addClass('in');
            $('.last').removeClass('last');
            $('.active').addClass('out');
            setTimeout(function () {
                $('.active').addClass('last');
                $('.active').removeClass('out');
                $('.active').removeClass('active');
                $('.in').removeClass('next');
                $('.in').addClass('active');
                $('.in').removeClass('in');
                $('.slide-3').addClass('next');
            }, 300);
            var slide2 = false,
                slide3 = true;
        } else {}
        return false;
    });

});