JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://seb.maxymeum.free.fr/jQuery.YMslider/demo/minified/css/jQuery.YMslider.core-min.css">
<link rel="stylesheet" href="http://seb.maxymeum.free.fr/jQuery.YMslider/demo/minified/css/jQuery.YMslider.default-min.css">
<script src="http://seb.maxymeum.free.fr/jQuery.YMslider/demo/minified/jQuery.YMslider-min.js"></script>
<ul class="infinite">
    <li>Panel 1</li>
    <li>Panel 2</li>
    <li>Panel 3</li>
    <li>Panel 4</li>
    <li>Panel 5</li>
</ul>

CSS

.YMslider { width: 200px }

.YMslider > .infinite {

    overflow: visible; position: relative; zoom: 1

}

.YMslider > .infinite:before, .YMslider > .infinite:after {

    content: ""; display: table

}

.YMslider > .infinite:after { clear: both }

JavaScript

$(".infinite").YMslider({ stop: function () {
 
    var $list = this.children(".panels"),
        $items = $list.children(),
        $first = $items.eq(0),
        $last = $items.eq(-1),
        width = this.width();

    // if we're currently viewing the last panel (get the 'margin-left' css
    // value (string) excluding "-" and "px", i.e. "600" == (3 - 1) * 300)
    $list.css("margin-left").slice(1, -2) == ($items.length - 1) * width ?

        // reset the 'margin-left' css value
        $list.css("margin-left", width) &&
        // get the last panel, apply some styles to it
        // and instert it right before the first one
        $first.before($last.css({ left: -width, position: "absolute" }))

    // if we're starting a new cycle, reset everything back to normal
    : $first.hasClass("last") && $last.after($first.css("position", "static"))

} });