JSFiddle - React, Tailwind, and code Playground

by Alex Bunt

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

#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>'); //HTML for the new image
			$('#image').fadeIn('fast'); //fades in the new image
		});
		$('#image').html('<a href="' + image + '" data-lightbox="image-1" data-title="' + title + '"><img src="' + image + '" class="image"/></a>'); //HTML for 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 there is only one image
		if($('.thumb:first').parent().next().find('img').length == 0 ) {
			return;
		} else {
		//if not simulate clicking the first thumbnail
		$('.thumb:first').click();
		}
	}
}