JSFiddle - React, Tailwind, and code Playground

by Daniel Lamb

HTML

<div class='carousel'>
    <ul class='carousel-inner static'>
        <li class='slide' style="background-image: url(http://lorempixel.com/473/277/city/1);">1</li>
        <li class='slide' style="background-image: url(http://lorempixel.com/473/277/city/2);">2</li>
        <li class='slide' style="background-image: url(http://lorempixel.com/473/277/city/3);">3</li>
        <li class='slide' style="background-image: url(http://lorempixel.com/473/277/city/4);">4</li>
        <li class='slide' style="background-image: url(http://lorempixel.com/473/277/city/5);">5</li>
        <li class='slide last' style="background-image: url(http://lorempixel.com/473/277/city/6);">6</li>
    </ul>
</div>
<div class='controls'>
    <button class='toggle'>
        <</button>
            <button class='toggle' data-toggle='next'>></button>
</div>

CSS

.carousel {
    overflow: hidden;
}
.carousel-inner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    left: -100%;
    transform: translateX(100%);
}
.carousel-inner.prev {
    transform: translateX(-100%);
}
.carousel-inner.static {
    transform: none;
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    flex: 1 0 100%;
    /* flex-grow (all equal) flex-shrink (no) flex-basis (100%) */
    order: 2;
    height: 380px;
    color: red;
}
.slide.last {
    order: 1;
}

JavaScript

var carousel, next, prev, slides;

carousel = $('.carousel-inner');

slides = $('.slide');

next = function (el) {
    if (el.next().length > 0) {
        return el.next();
    } else {
        return slides.first();
    }
};

prev = function (el) {
    if (el.prev().length > 0) {
        return el.prev();
    } else {
        return slides.last();
    }
};

$('.toggle').on('click', function (e) {
    var el, i, j, new_slide, ref;
    el = $('.last').removeClass('last');
    if ($(e.currentTarget).data('toggle') === 'next') {
        new_slide = next(el);
        carousel.removeClass('prev');
    } else {
        new_slide = prev(el);
        carousel.addClass('prev');
    }
    new_slide.addClass('last').css('order', 0);
    for (i = j = 2, ref = slides.length; 2 <= ref ? j <= ref : j >= ref; i = 2 <= ref ? ++j : --j) {
        new_slide = next(new_slide).css('order', --i);
    }
    carousel.removeClass('static');
    return setTimeout((function () {
        return carousel.addClass('static');
    }), 50);
});