JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slides" style="overflow: hidden; display: block;">
    <div class="slidesjs-container" style="overflow: hidden; position: relative; width: 970px; height: 544.851px;">
        <div class="slidesjs-control" style="position: relative; left: 0px; width: 970px; height: 544.851px;">
            <div class="slidesjs-slide" slidesjs-index="0" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 10; backface-visibility: hidden;">dawdwdwadawdaw</div>
            <div class="slidesjs-slide" slidesjs-index="1" style="position: absolute; top: 0px; left: 970px; width: 100%; z-index: 0; display: block; backface-visibility: hidden;">adwdawdwdwdawdaw</div>
            <div class="slidesjs-slide" slidesjs-index="2" style="position: absolute; top: 0px; left: 0px; width: 100%; z-index: 0; display: none; backface-visibility: hidden;">dawdawdwdwad</div>
            <div class="slidesjs-slide" slidesjs-index="3" style="position: absolute; top: 0px; left: -970px; width: 100%; z-index: 0; display: block; backface-visibility: hidden;">dawdawdawdawdawd</div>
        </div>
    </div>



    <a class="slidesjs-previous slidesjs-navigation" href="#" title="Previous">Previous</a><a class="slidesjs-next slidesjs-navigation" href="#" title="Next">Next</a>
    <ul class="slidesjs-pagination">
        <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="0" class="active">1</a>
        </li>
        <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="1">2</a>
        </li>
        <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="2">3</a>
        </li>
        <li class="slidesjs-pagination-item"><a href="#" data-slidesjs-item="3">4</a>
        </li>
    </ul>
</div>

JavaScript

(function() {
    (function(e, t, n) {
        var r, i, s;
        s = "slidesjs";
        i = {
        	pagination: {
                active: !0,
                effect: "slide"
            },
            width: 940,
            height: 528,
            start: 1,
            navigation: {
                active: !0,
                effect: "slide"
            },
            
            play: {
                active: !1,
                effect: "slide",
                interval: 5e3,
                auto: !1,
                swap: !0,
                pauseOnHover: !1,
                restartDelay: 2500
            },
            effect: {
                slide: {
                    speed: 500
                },
                fade: {
                    speed: 300,
                    crossfade: !0
                }
            },
            callback: {
                loaded: function() {},
                start: function() {},
                complete: function() {}
            }
        };
        r = function() {
            function t(t, n) {
                this.element = t;
                this.options = e.extend(!0, {}, i, n);
                this._defaults = i;
                this._name = s;
                this.init()
            }
            return t
        }();
        r.prototype.init = function() {
            var n, r, i, s, o, u, a = this;
            n = e(this.element);
            this.data = e.data(this);
            e.data(this, "animating", !1);
            e.data(this, "total", n.children().not(".slidesjs-navigation", n).length);
            e.data(this, "current", this.options.start - 1);
            e.data(this, "vendorPrefix", this._getVendorPrefix());
            if (typeof TouchEvent != "undefined") {
                e.data(this, "touch", !0);
                this.options.effect.slide.speed = this.options.effect.slide.speed / 2
            }
            n.css({
                overflow: "hidden"
            });
           ...