JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://54.86.14.226/daniel/js/lightslider.js"></script>
<link rel="stylesheet" href="http://54.86.14.226/daniel/css/lightslider.css">
<div id"container">
	
                <ul id="image-gallery" class="gallery list-unstyled cS-hidden">
                    <li data-thumb='http://54.86.14.226/daniel/img/1.jpg'>
                        <img src='http://54.86.14.226/daniel/img/1.jpg' />
                    </li>
                    <li data-thumb='http://54.86.14.226/daniel/img/2.jpg'>
                        <img src='http://54.86.14.226/daniel/img/2.jpg' />
                    </li>
                    <li data-thumb='http://54.86.14.226/daniel/img/3.jpg'>
                        <img src='http://54.86.14.226/daniel/img/3.jpg' />
                    </li>
                    <li data-thumb='http://54.86.14.226/daniel/img/4.jpg'>
                        <img src='http://54.86.14.226/daniel/img/4.jpg' />
                    </li>
                    
                </ul>
</div>                
     <br><br>
    <button id="add">Add new Slide</button>
         
    <br><br>

CSS

ul{
    list-style: none outside none;
    padding-left: 0;
    margin: 0;
}
.demo .item{
    margin-bottom: 30px;
}
.content-slider li{
    background-color: #ed3020;
    text-align: center;
    color: #FFF;
}
.content-slider h3 {
    margin: 0;
    padding: 70px 0;
}
.demo{
    width:1280px;
}

JavaScript

$(document).ready(function() {
    
    var s = $('#image-gallery').lightSlider({
        gallery:true,
        item:1,
        thumbItem:5,
        slideMargin: 0,
        speed:500,
        auto:false,
        loop:false,
        onSliderLoad: function() {
          $('#image-gallery').removeClass('cS-hidden');
        }
      });

       $("#add").click(function() {
           var width = $('#image-gallery').find('li').first().width();
           var newEl = $('<li/>', {class:'lslide'});
           newEl.css({width:width+'px', 'margin-right':'0px'});
           newEl.attr('data-thumb', 'http://placekitten.com/160/82');
           newEl.append($('<img/>', {src: 'http://placekitten.com/1280/655'}));
           $('#image-gallery').append(newEl);
           s.refresh();
       });        
});