JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<div id="content-page-container">

<div id="mask">
<div id="leftarrow">Next</div>
<div id="rightarrow">Back</div>
<div id="">

    </div>
    <img src="http://www.margaritaislandpictures.com/Playa-El-Agua-Isla-Margarita-Venezuela/Playa-El-Agua-Panoramic-Beach-Side.jpg" id="ground"/>
<div class="mid">					
					 <div style="background-color: red;"></div>
					 <div style="background-color: blue;"></div>
					 <div style="background-color: green;"></div>
					 <div style="background-color: orange;"></div>
					 <div style="background-color: purple;"></div>
					 
					 
</div>
</div>

</div>

CSS

#background img{
z-index: 1;
position:absolute;
top:20px;
}
#back {
    position:absolute;
    background-size:100%;
    background-image:url("http://www.margaritaislandpictures.com/Playa-El-Agua-Isla-Margarita-Venezuela/Playa-El-Agua-Panoramic-Beach-Side.jpg");
        height:200px;
    width:1500px;
}

.mid {
clear: both;
width: 1500px;
height: 100px; 
position:absolute;
top:20px;
z-index: 10;
}

.mid div{
margin:10 20px;
height: 100px;
width: 200px;
display: inline-block;
}

#leftarrow, #rightarrow {
border: 1px solid black;
background-color: #fff; 
width: 40px;
height: 20px;
position: absolute;
top: 100px;
z-index: 100000;
}

#leftarrow {
right: 0px;
}
#rightarrow {
left: 0px;
}

#mask{
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}

JavaScript

$(document).ready(function() {
					var timer;

					$("#leftarrow").hover(function() {
						timer = setInterval(function() {slideLeft();}, 50);
					}, function() {
						clearInterval(timer);
					});


				$("#rightarrow").hover(function() {
						timer = setInterval(function() {slideRight();}, 50);
					}, function() {
						clearInterval(timer);
					});



				function slideLeft() {
					$("#ground").stop().animate({
						'left': '-=10px'
					}, 50);
					$(".mid").stop().animate({
						'left': '-=20px'
					}, 50);

				}

				function slideRight() {
					$("#ground").stop().animate({
						'left': '+=10px'
					}, 50);
                    $(".mid").stop().animate({
						'left': '+=20px'
					}, 50);
			
				}


				});