JSFiddle - React, Tailwind, and code Playground

by Matt Clark

HTML

<div id="banners">

	<div class="item">

		Banner 1

	</div>

	<div class="item">

		Banner 2

	</div>

	<div class="item">

		Banner 3

	</div>

	<!-- Add more items here if you like -->

</div>

<a id="prev" href="#">Previous</a>
<a id="next" href="#">Next</a>

CSS

#banners {
	position: relative;
	width: 500px;
	height: 250px;
	/* Modify your width and height to your liking */
	background: #0096d7;
	/* Sample background */
}

.item {
	display: none;
	/* You don't want ALL of the banners to display */
	position: absolute;
	width: 100%;
	height: 100%;
	background: #0096d7;
	/* Sample background */
}

.item:first-of-type {
	display: block;
	/* Show the first banner */
}

JavaScript

$(function() {

	var banners = $('.item').length;
	var n = 1;

	$('#next, #prev').click(function() {

		if ($(this).attr('id') == 'next') {

			n++;

		} else {

			n--;
		}

		$('.item').stop().fadeOut();

		if (n > banners) { // END of the rotation

			$('.item:nth-of-type(1)').stop().fadeIn();

			n = 1;

		} else if (n < 1) { // BEGINNING of the rotation/

			$('.item:nth-of-type(' + banners + ')').stop().fadeIn();

			n = banners;

		} else { // MIDDLE of the rotation

			$('.item:nth-of-type(' + n + ')').stop().fadeIn();
		}

	});

	setInterval(function() {
		$('#next').click();
	}, 8000);

});