JSFiddle - React, Tailwind, and code Playground

by sachin377

HTML

<script src="http://sachinchoolur.github.io/lightslider/lightSlider/js/jquery.lightSlider.js"></script>
<link rel="stylesheet" href="http://sachinchoolur.github.io/lightslider/lightSlider/css/lightSlider.css">
<ul id="lightslider">
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" />
    </li>
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" />
    </li>
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" />
    </li>
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-7.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-8.jpg" />
    </li>
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-9.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-10.jpg" />
    </li>
    <li>
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-11.jpg" />
        <img src="http://sachinchoolur.github.io/lightslider/img/cS-12.jpg" />
    </li>
</ul>

CSS

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

JavaScript

$('#lightslider').lightSlider();