JSFiddle - React, Tailwind, and code Playground

by ajayendra2707

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="main">
		<a id="nav-1" onclick="leftNavigation()" class="nav">Left</a>
		<div id="wrapper">
			<div id="slide-option-1" class="slide"></div>
			<div id="slide-option-2" class="slide"></div>
			<div id="slide-option-3" class="slide"></div>
		</div>
		<a id="nav-2" class="nav" onclick="rightNavigation()">Right</a>
		</div>

CSS

html, body, body *{
			margin: 0;
			padding: 0;
		}
		
		#wrapper{
			height: 300px;
			white-space: nowrap;
			overflow: hidden;
		}
		
		.slide{
			display: inline-block;
			width: 100%;
			height: 100%;
			
		}
		
		#slide-option-1{
			background-color: #808080;
		}
		#slide-option-2{
			background-color: green;
		}
		#slide-option-3{
			background-color: blue;
		}
		#main{
		position: relative;
		}
		
		.nav{
			position: absolute;
			cursor: pointer;
		}
		#nav-1{
			left: 10px;
			top: 45%;
		}
		
		#nav-2{
			right: 10px;
			top: 45%;
		}

JavaScript

var slides = document.getElementsByClassName('slide');
		var slider_count = 0;
		var offset_value;
		start();
		
    function leftNavigation(){			
			slider_count--;
			if(slider_count < 0){
				slider_count = slides.length - 1;
			}
			offset_value = slides[slider_count].offsetLeft;
			$("#wrapper").animate({scrollLeft:offset_value}, 0);		
      alert('left');
		}
		
    function rightNavigation(){
			if(slider_count >= slides.length){
				slider_count = 0;
			}
			offset_value = slides[slider_count].offsetLeft;
			$("#wrapper").animate({scrollLeft:offset_value}, 0);
			slider_count++;
      alert('right');
		}
    
		function start(){			
				if(slider_count == slides.length){
				slider_count = 0;
				}
			
				offset_value = slides[slider_count].offsetLeft;		
				slider_count++;
				$("#wrapper").animate({scrollLeft:offset_value}, 1000);
				setTimeout(start, 3000);
		}