JSFiddle - React, Tailwind, and code Playground

by Emerson Marini

HTML

<div class="jcarousel">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<a class="jcarousel-next" data-jcarouselcontrol="true">prev</a>

<a class="jcarousel-prev" data-jcarouselcontrol="true">next</a>

CSS

.jcarousel {
    position: relative;
    overflow: hidden;
    width:52px;
    height:50px;
    background-color: cyan;
}
.jcarousel ul {
    width: 270px;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.jcarousel li {
    float: left;
    width:46px;
    background-color: yellow;
    height:34px;
    text-align:center;
    padding-top:10px;
    border: 1px solid gray;
    margin: 2px;
}

JavaScript

/*! jCarousel - v0.3.1 - 2014-04-26
 * http://sorgalla.com/jcarousel
 * Copyright (c) 2014 Jan Sorgalla; Licensed MIT */ (function (t) {
    "use strict";
    var i = t.jCarousel = {};
    i.version = "0.3.1";
    var s = /^([+\-]=)?(.+)$/;
    i.parseTarget = function (t) {
        var i = !1,
            e = "object" != typeof t ? s.exec(t) : null;
        return e ? (t = parseInt(e[2], 10) || 0, e[1] && (i = !0, "-=" === e[1] && (t *= -1))) : "object" != typeof t && (t = parseInt(t, 10) || 0), {
            target: t,
            relative: i
        }
    }, i.detectCarousel = function (t) {
        for (var i; t.length > 0;) {
            if (i = t.filter("[data-jcarousel]"), i.length > 0) return i;
            if (i = t.find("[data-jcarousel]"), i.length > 0) return i;
            t = t.parent()
        }
        return null
    }, i.base = function (s) {
        return {
            version: i.version,
            _options: {},
            _element: null,
            _carousel: null,
            _init: t.noop,
            _create: t.noop,
            _destroy: t.noop,
            _reload: t.noop,
            create: function () {
                return this._element.attr("data-" + s.toLowerCase(), !0).data(s, this), !1 === this._trigger("create") ? this : (this._create(), this._trigger("createend"), this)
            },
            destroy: function () {
                return !1 === this._trigger("destroy") ? this : (this._destroy(), this._trigger("destroyend"), this._element.removeData(s).removeAttr("data-" + s.toLowerCase()), this)
            },
            reload: function (t) {
                return !1 === this._trigger("reload") ? this : (t && this.options(t), this._reload(), this._trigger("reloadend"), this)
            },
            element: function () {
                return this._element
            },
            options: function (i, s) {
                if (0 === arguments.length) return t.extend({}, this._options);
                if...