JSFiddle - React, Tailwind, and code Playground

Jquery - Slideshow

by Jennifer Perrin

HTML

<div>
<div id="photo_1" style="position:absolute; display:none;">
<img src="http://placekitten.com/230/200" border="0" />
</div>
<div id="photo_2" style="position:absolute; display:none;">
<img src="http://placekitten.com/200/200" border="0" />
</div>
<div id="photo_3" style="position:absolute; display:none;">
<img src="http://placekitten.com/200/230" border="0" />
</div>
<div id="photo_4" style="position:absolute; display:none;">
<img src="http://placekitten.com/200/260" border="0" />
</div>
</div>

JavaScript

var TotalImages = 4;
	var CurrentImage = 1;
	var divPrefix = 'photo_';
	var TimerHandler = null;

	function TimerShowNextImage() {
	    $("#" + divPrefix + CurrentImage).fadeOut(600);
	    if (CurrentImage == TotalImages) CurrentImage = 1;
	    else CurrentImage += 1;
	    $("#" + divPrefix + CurrentImage).fadeIn(600);
	}

	function ShowNextImage() {
	    clearInterval(TimerHandler);
	    $("#" + divPrefix + CurrentImage).fadeOut(600);
	    if (CurrentImage == TotalImages) CurrentImage = 1;
	    else CurrentImage += 1;
	    $("#" + divPrefix + ssCurrentImage).fadeIn(600);
	    TimerHandler = setInterval(TimerShowNextImage, 4000);
	}

	function ShowPrevImage() {
	    clearInterval(TimerHandler);
	    $("#" + divPrefix + CurrentImage).fadeOut(600);
	    if (CurrentImage == 1) CurrentImage = 4;
	    else CurrentImage -= 1;
	    $("#" + divPrefix + CurrentImage).fadeIn(600);
	    TimerHandler = setInterval(TimerShowNextImage, 4000);
	}
	$(function () {
	    $("#leftbtndiv").click(function () {
	        ShowPrevImage();
	        return true;
	    });
	    $("#rightbtndiv").click(function () {
	        ShowNextImage();
	        return true;
	    });
	});
	$(document).ready(function () {
	    $("#" + divPrefix + CurrentImage).fadeIn(10);
	    TimerHandler = setInterval(TimerShowNextImage, 4000);
	});