JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div>

<ul id='slide' >

<li> content 1 ..content 1 ..content 1 ..  </li>
<li> content 2 .. content 2 ..content 2 ..content 2 .. </li>
<li> content 3 ..content 3 ..content 3 ..content 3 .. </li>
<li> content 4 .. content 4 .. content 4 .. content 4 ..  </li>

</ul>
</div>
</br>
</body>

CSS

li {list-style:none;background-color:lightgreen;}

JavaScript

/**
 * jQuery bxSlider v3.0
 * http://bxslider.com
 *
 * Copyright 2011, Steven Wanderski
 * http://bxcreative.com
 *
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 */


(function($){
    
    $.fn.bxSlider = function(options){        
                
        var defaults = {
            mode: 'horizontal',                                    // 'horizontal', 'vertical', 'fade'
            infiniteLoop: true,                                    // true, false - display first slide after last
            hideControlOnEnd: false,                        // true, false - if true, will hide 'next' control on last slide and 'prev' control on first
            controls: true,                                            // true, false - previous and next controls
            speed: 500,                                                    // integer - in ms, duration of time slide transitions will occupy
            easing: 'swing',                    // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
            pager: false,                                                // true / false - display a pager
            pagerSelector: null,                                // jQuery selector - element to contain the pager. ex: '#pager'
            pagerType: 'full',                                    // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4
            pagerLocation: 'bottom',                        // 'bottom', 'top' - location of pager
            pagerShortSeparator: '/',                        // string - ex: 'of' pager would display 1 of 4
            pagerActiveClass: 'pager-active',        // string - classname attached to the active pager link
            nextText: 'next',                                        // string - text displayed for 'next' control
            nextImage: '',                                  ...