JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://9bitstudios.github.io/flexisel/javascripts/jquery.flexisel.js"></script>

<div class="banner1">
    <div class="slider-wrapper">
        <ul id="flexiselDemo1">
            <li class="slide">
                <div class="slide-item"><img src="http://placehold.it/640x320"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>

            </li>
            <li class="slide">
                <div class="slide-item"><img src="http://placehold.it/640x320"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>
            </li>
            <li class="slide">
                <div class="slide-item"><img src="http://placehold.it/640x320"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>
                <div class="slide-item"><img src="http://placehold.it/320x160"></div>
            </li>


        </ul>
    </div>
</div>

<div class="banner2">
    <div class="slider-wrapper">
        <ul id="flexiselDemo2">
            <li class="slide">
                <img src="http://placehold.it/320x160">
            </li>
            <li class="slide"><img src="http://placehold.it/320x160">

            </li>
            <li class="slide"><img src="http://placehold.it/320x160">

            </li>
            <li class="slide"><img src="http://placehold.it/320x160"></li>
            <li class="slide"><img src="http://placehold.it/320x160"></li>

        </ul>
    </div>
</div>

CSS

body{
    margin: 0;
    padding: 0;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
display:none;
}

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
}
.nbs-flexisel-ul {
    position:relative;
    width:9999px;
    margin:0px;
    padding:0px;
    list-style-type:none;   

}

.nbs-flexisel-inner {
    overflow:hidden;
    float:left;
    width:100%;
    border:1px solid #ccc;

}

.nbs-flexisel-item {
    float:left;
    margin:0px;
    padding:0px;
    cursor:pointer;
    position:relative;
    line-height:0px;
}
.nbs-flexisel-item img {
    cursor: pointer;

}

/*** Navigation ***/

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    width: 22px;
    height: 22px; 
    position: absolute;
    cursor: pointer;
    z-index: 100;
    opacity: 0.5;
}

.nbs-flexisel-nav-left {
    left: 10px;
    background: url(../images/button-previous.png) no-repeat;
}

.nbs-flexisel-nav-right {
    right: 5px;
    background: url(../images/button-next.png) no-repeat;
}
.banner1{
            width:100%;
            overflow:hidden;
            max-height:320px;
            margin-bottom:30px;
        }
        .banner2{
            width:100%;
            overflow:hidden;

        }
        .slider-wrapper{
            margin-bottom:20px;
            margin: 0 auto;
            max-width: 960px;
        }
        .slider1 img, slider2 img{
            float:left;
        }
               .nbs-flexisel-inner {

            overflow: visible !important;

        }
        .slide-item{
            float: left;
        }

JavaScript

$("#flexiselDemo1").flexisel({
        visibleItems: 1,
        animationSpeed: 500,
        autoPlay: true,
        autoPlaySpeed: 2000,
        pauseOnHover: true,
        clone:true
    })
    $("#flexiselDemo2").flexisel({
        visibleItems: 4,
        animationSpeed: 1000,
        autoPlay: true,
        autoPlaySpeed: 3000,
        pauseOnHover: true,
        clone:true
    })