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>
<div class="cont">
    <ul id="lightSlider">
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /></li>
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /></li>
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" /></li>
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /></li>
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /></li>
        <li><img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" /></li>
    </ul>    
</div>

CSS

.cont{
    max-width:420px;
}
ul{
    list-style: none outside none;
    padding-left: 0;
}
li {
    display: block;
    float: left;
    margin-right: 6px;
}
img {
    display: block;
    height: auto;
    max-width: 100%;
}

JavaScript

var slider = $('#lightSlider').lightSlider({
    slideMargin:0,
    item:1,
    auto:true,
});
$('cont').on('mouseenter',function(){
    slider.pause();
});
$('cont').on('mouseleave',function(){
    slider.play();
});