JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//raw.githack.com/sachinchoolur/lightslider/1.1.2/src/css/lightslider.css">
<script src="//raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js"></script>
<script src="//raw.githack.com/sachinchoolur/lightGallery/1.1.4/light-gallery/js/lightGallery.js"></script>
<link rel="stylesheet" href="//raw.githack.com/sachinchoolur/lightGallery/1.1.4/light-gallery/css/lightGallery.css">
<ul id="lightslider">
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /></li>
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /></li>
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" /></li>
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /></li>
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /></li>
    <li data-src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" /></li>
</ul>

CSS

ul{
    list-style: none outside none;
    padding-left: 70px;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
    cursor:pointer;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

JavaScript

$('#lightslider').lightSlider({
    minSlide:1,
    maxSlide:3,
    slideMove:1,
    slideMargin:5,
    mode: 'slide',
    onSliderLoad: function() {
        $("#lightslider").lightGallery();    
    }
});