JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.scrollTo-1.4.2.js"></script>
<script type="text/javascript" src="https://raw.github.com/alexanmtz/sliding/master/jquery.sliding.js"></script>
<div id="slide-container">
    <ul>
        <li>item 01</li>
        <li>item 02</li>
        <li>item 03</li>
    </ul>
</div>
<div id="target"></div>
<div id="current-page"></div>
<div id="loading"></div>

CSS

#slide-container {
 border: 1px solid gray;
 overflow: hidden;    
}

.disabled {
 color: gray;   
}    

ul li {
 float: left;    
}

JavaScript

$(function(){
    var element = $('#slide-container').sliding({
        items: 3,
        target: '#target',
        disabledClass: 'disabled',
        url: '/echo/html/',
        params: {
            html: "<li>ajax item</li><li>ajax item 2</li><li>ajax item3</li>",
            delay: 3
        },
        type: "POST",
        beforeAjax: function() {
          $('#loading').text('loading');
        },
        finish: function() {
            $('#loading').text('complete');
        },
        onAppend: function(data) {
         // you can change the ajax return and return
         return data;            
        }
    });
    element.sliding("setTotalPages", 3);
    
    var currentPage = element.sliding("getCurrentPage");
    $('#current-page').html(currentPage);
});