JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/img/close.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js"></script>
<!-- If using this code make sure to include lightbox! http://www.lokeshdhakar.com/projects/lightbox2/ -->
<div id="slider">
    <div id='image'> <a href='http://dummyimage.com/250x250/000000/fff&text=1' data-lightbox='image-1' data-title='test1'><img src='http://dummyimage.com/250x250/000000/fff&text=1' border='0' class='image'/></a>

    </div>
    <div id='thumbs'> <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=1' data-ligtbox='image-1' data-title='test1' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=1' class='thumb active' border='0'/></a>
 <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=2' data-title='test2' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=2' class='thumb' border='0'/></a>
 <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=3' data-title='test3' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=3' class='thumb' border='0'/></a>
 <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=4' data-title='test4' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=4' class='thumb' border='0'/></a>
 <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=5' data-title='test5' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=5' class='thumb' border='0'/></a>
 <a href='#' rel='http://dummyimage.com/250x250/000000/fff&text=6' data-title='test6' class='image'><img src='http://dummyimage.com/250x250/000000/fff&text=6' class='thumb' border='0'/></a>

    </div>
</div>

CSS

#slider {
    width:500px;
    height:505px;
    background-color:#000;    
}

#image {
    padding:5px;
    float: left;
}
#thumbs {
    float:left;
    width: 115px;
    overflow: hidden;
}
.image {
    height: 500px;
    width: 500px;
}
.thumb {
    height: 50px;
    width: 50px;
    opacity: 0.6;
    padding: 2px;
    border: 1px solid white;
}
.active {
    opacity: 1;
    border: 1px solid lightgrey;
}

JavaScript

$(document).ready(function () {

    //setting the timer for automatic cycling as a variable
    var timer = setInterval('CycleImages()', 5000);

    //checking if the user is hovering over the slider
    $('#slider').hover(function (ev) {
        //cancels the timer if the user is hovering
        clearInterval(timer);
    }, function (ev) {
        //calls the timer if the user is not hovering
        timer = setInterval('CycleImages()', 5000);
    });

    //clicking thumbnails
    $(".image").click(function () {
        var image = $(this).attr("rel"); //getting the rel tag from the a tag
        var title = $(this).attr("data-title"); //data title from a tag
        $('#image').fadeOut('fast', function() { //fades out last image
        $('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>')
        .fadeIn('fast'); 
        })//HTML for the new image
      //fades in the new image
        $(this).siblings().find('img').removeClass('active'); //removes active class from old thumbnail
        $(this).find('img').addClass('active'); //adds the active class to the new active thumbnail
        return false;
    });
    $('.thumb:first').click();
});



function CycleImages() {
    //if there is another thumbnail img after currently selected
    if ($('.active').parent().next().find('img').length > 0) {
        //simulate clicking the next thumbnail
        $('.active').parent().next().find('img').click();
    } else {
        //if not simulate clicking the first thumbnail
        $('.thumb:first').click();
    }

}