JSFiddle - React, Tailwind, and code Playground

by sachin377

HTML

<script src="http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js"></script>
<link rel="stylesheet" href="http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css">
<script src="//raw.githack.com/sachinchoolur/lightslider/1.1.2/src/js/lightslider.js"></script>
<link rel="stylesheet" href="//raw.githack.com/sachinchoolur/lightslider/1.1.2/src/css/lightslider.css">
<ul id="lightslider">
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg" /></a></li>
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg" /></a></li>
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-3.jpg" /></a></li>
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-4.jpg" /></a></li>
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-5.jpg" /></a></li>
    <li><a href="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg"><img src="http://sachinchoolur.github.io/lightslider/img/cS-6.jpg" /></a></li>
</ul>

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%;
}

JavaScript

$('#lightslider').lightSlider({
    minSlide:1,
    maxSlide:3,
    slideMove:1,
    slideMargin:5,
    mode: 'slide',
    onSliderLoad: function() {
        $('#lightslider').magnificPopup({
          delegate: 'a',
          type: 'image'
        });    
    }
});