JSFiddle - React, Tailwind, and code Playground

by Al Kasih

HTML

<div class="holder_container">
    <div class="img_container">
        <div class="photo type1">ONE</div> 
        <div class="photo type2">TWO</div>
        <div class="photo type3">THREE</div>
    </div>
</div>


<div class="top">
    <div class="thumb">1</div>
    <div class="thumb">2</div>
    <div class="thumb">3</div>
</div>


<div class="holder_container">
    <div class="img_container">
        <div class="photo type1">ONE</div> 
        <div class="photo type2">TWO</div>
        <div class="photo type3">THREE</div>
    </div>
</div>


<div class="top">
    <div class="thumb">1</div>
    <div class="thumb">2</div>
    <div class="thumb">3</div>
</div>

CSS

.holder_container {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 150px;
	position: relative;
	overflow: hidden;
}
.img_container {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 450px;
	position: relative;
	left: 0px;
	top: 0px;
}
.photo {
	margin: 0px;
	padding: 0px;
	height: 50px;
	width: 150px;
	display: block;
	float: left;
}
.type1 {
	background-color: #F00;
}
.type2 {
	background-color: #0F0;
}
.type3 {
	background-color: #0FF;
}
.nav_buttons {
	padding: 0px;
	height: 20px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
}
.nav {
	padding: 0px;
	height: 20px;
	width: 50px;
	float: left;
	margin-top: 0px;
	margin-right: 20px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #FF0;
	cursor: pointer;
}

.thumb {
	height: 20px;
	width: 50px;
	background: #999;
	margin: 5px;
	cursor: pointer;
}

JavaScript

var timeToChange = 3; // in Seconds
var timeSinceReset = 0; // also in Seconds
var currentImage = 1; // Which image you are currently viewing
var totalImages = 3;

$(document).ready(function(){
	var slideShow = setInterval(function () {
		autoAdvance();
	}, 1000); // only one second
	
	$('.thumb').hover(function (each) {
		timeSinceReset = 0;
		var childNumber = $(this).index();
		currentImage = childNumber + 1;
		
		var newPos = -(childNumber * 150) + 'px';		
		$('.img_container').animate({left: newPos}, 0);
	});
	
	$('.nav').click(function(){
		timeSinceReset = 0;
		if($(this).hasClass('back')){ // Back button
			if(currentImage == 1){
				currentImage = totalImages;
			}else{
				currentImage--;
			}
		}else{ // Forward button
			if(currentImage == totalImages){
				currentImage = 1;
			}else{
				currentImage++;
			}
		}
		
		var newPos = -((currentImage-1) * 150) + 'px';		
		$('.img_container').animate({left: newPos}, 0);
		
	});
});

function moveNext(){
	if(currentImage == totalImages){
		currentImage = 1;
		var newPos = 0 + 'px';		
		$('.img_container').animate({left: newPos}, 0);
	}else{
		currentImage++;
		var newPos = -((currentImage-1) * 150) + 'px';		
		$('.img_container').animate({left: newPos}, 0);
	}
}

function autoAdvance() {
    if (timeSinceReset == timeToChange) {
        timeSinceReset = 0;
		moveNext();
    } else {
        timeSinceReset++;
    }
}