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>
<ul class="slider1">
    <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 class="fade">
    <ul class="slider2">
        <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

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%;
}
.fade{
    max-width:300px;    
}
.slider2 li{
    height:200px;
}

JavaScript

$('.slider1').lightSlider({
    minSlide:1,
    maxSlide:3,
    slideMove:1,
    slideMargin:5,
    mode: 'slide'
});

$('.slider2').lightSlider({
    minSlide:1,
    maxSlide:1,
    mode:'fade'
});