JSFiddle - React, Tailwind, and code Playground

by Dawid van der Hoven

HTML

<div class="vertical-list mobile-carousel">
    <div class="column active">
        <img src="http://placehold.it/200x200" class="circular-image" alt="" />
        <p> <strong>Slide 1</strong>

            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem! Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.</p>
    </div>
    <div class="column">
        <img src="http://placehold.it/200x200" class="circular-image" alt="" />
        <p> <strong>Slide 2</strong>

            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem! Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.</p>
    </div>
    <div class="column last">
        <img src="http://placehold.it/200x200" class="circular-image" alt="" />
        <p> <strong>Slide 3</strong>

            <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dignissimos perspiciatis voluptas voluptatem! Ad debitis dignissimos doloribus exercitationem natus officiis quod sit, vitae voluptate. Alias debitis delectus exercitationem quia.</p>
    </div> <a class="carousel-navigate next" href="#next">Next</a>
 <a class="carousel-navigate prev" href="#prev">Prev</a>

</div>

CSS

.mobile-carousel {
    position: relative;
    height:300px;
    overflow: hidden;
}
.mobile-carousel .column {
    /*Start State*/
    position: absolute;
    background: red;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    display: inline-block;
    opacity: 0;
}
.mobile-carousel .column.active {
    /*Idle State*/
    opacity: 1;
    left:0;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.mobile-carousel .column.slide-in.right, .mobile-carousel .column.slide-in.left {
    /*Animate In*/
    opacity: 1;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.mobile-carousel .column.slide-in.right, .mobile-carousel .column.slide-out.right {
    left:-105%;
}
.mobile-carousel .column.slide-in.left, .mobile-carousel .column.slide-out.left {
    left:105%;
}
.mobile-carousel .column.slide-out.left, .mobile-carousel .column.slide-out.right {
    /*Animate Out*/
    opacity: 0;
}
.mobile-carousel .carousel-navigate {
    position: absolute;
    top: 50%;
    display: block;
}
.mobile-carousel .next {
    right: 0;
}
.mobile-carousel .prev {
    left: 0;
}

JavaScript

(function ($, window, undefined) {
    'use strict';

    $.Carousel = function (element) {
        this.$el = $(element);
    };

    $.Carousel.prototype = {

        _init: function () { //Init The Plugin
            this._layout();
            this._initEvents();
            this.autoPlay();

        },
        _layout: function () { //Map the Layout of the Menu
            this.pages = this.$el.children('.column');
            this.pagesLength = this.pages.length;
            this.activePage = this.$el.children('.active');
            this.nextPage = this.$el.children('.next');
            this.prevPage = this.$el.children('.prev');
        },
        autoPlay: function () {
            var self = this;
            var play = setInterval(function () {
                self._page(+1); // same as clicking next
            }, 3000); // every 3 seconds
            $('.mobile-carousel').hover(function () { // when mouse is over carousel
                clearInterval(play); // clearInterval to pause
            }, function () { // when mouse is not over carousel 
                play = setInterval(function () { // setInterval again to resume playing
                    self._page(+1);
                }, 3000);
            });
        },
        _initEvents: function () { //Set Up the Event Listeners
            var self = this;
            this.nextPage.on('click.carousel', function (e) {
                self._page(+1);
                e.preventDefault();
            });

            this.prevPage.on('click.carousel', function (e) {
                self._page(-1);
                e.preventDefault();
            });
        },
        _page: function (delta) {
            var index = this.activePage.index() + delta,
                length = (this.pagesLength - 1);
            if (index < 0) {
                index = length;
            }
            if (index > length) {
                index = 0;
            }
            this._animatePage(this.activePage,...