JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="mask">
<div id="nextarrow"></div>
<div id="backarrow"></div>
<div id="background"></div>
<div class="mid">					
					 <div id="slide1" class="slide">
						<p id="shop-slide1" class="shop-link">+ Shop The Collection</p>
					 </div>
					 <div id="slide2" class="slide">
						<p id="shop-slide2" class="shop-link" style="color: #fff; font-weight: bold;">+ I need this</p>
					 </div>
					 <div id="slide3" class="slide"></div>
					 <div id="slide4" class="slide"></div>
					 <div id="slide5" class="slide"></div>
					 
					 
</div>
						<div id="shop-slide1-contents">
							<div class="close">[close]</div>
							<p>This is a hidden div that appears with different content when someone clicks on a slide.</p>
							<p>Has a slide up animation</p>
							<p>Can contain images, links, text, etc.</p>
						</div>
						<div id="shop-slide2-contents">
							<div class="close">[close]</div>
							<p>This is a hidden div that appears with different content when someone clicks on a slide.</p>
							<p>Has a fade in/fade out animation</p>
							<p>Can contain images, links, text, etc.</p>
						</div>
</div>

CSS

#background {
    position:absolute;
    background-image:url("http://www.margaritaislandpictures.com/Playa-El-Agua-Isla-Margarita-Venezuela/Playa-El-Agua-Panoramic-Beach-Side.jpg");
    height:525px;
    width:2600px;
	opacity:0.5;
}

.mid {
clear: both;
width: 2600px;
height: 400px; 
position:absolute;
top:20px;
z-index: 5;
margin: 0 0 0 220px;
}

.mid div.slide{
margin: 10px 40px;
height: 400px;
width: 400px;
display: inline-block;
position: relative;
}

#nextarrow, #backarrow {
background-image: url(http://lcoawebservices.com/assets/long-arrows.png);
height: 70px;
width: 35px;
position: absolute;
top: 175px;
z-index: 100000;
}

#nextarrow {
	right: 0px;
}
#nextarrow:hover {
	background-position: 35px 0;
}
#backarrow {
	background-position: 0 -72px;	
	left: 0px;
}

#backarrow:hover{
	background-position: 35px -72px;
	}

#mask{
position: relative;
width: 980px;
height: 525px;
overflow: hidden;
border: 2px solid #474747;
}

#slide1{
background-image: url(http://www.egglestontrust.com/images/monographs/two_and_a_quarter_c.jpg);
}

#slide3{
background-image: url(http://3.bp.blogspot.com/-C70C9agFOgg/Ug4MKBrPufI/AAAAAAAALgQ/2pIlrgRMHuA/s1600/IMG_4355.jpg);
background-size: 400px 400px;
}

#slide4{
background-image: url(http://3.bp.blogspot.com/-2kbLQBEa2mw/UQ6JViUoKGI/AAAAAAAAK2U/f5x25sl_Qn0/s1600/IMG_7542_Italia-Manarola.JPG);
background-size: 400px 400px;
}

#slide5{
background-image: url(http://1.bp.blogspot.com/-BImtRKYrkcY/UE1HUKETjrI/AAAAAAAAJYk/dch8KdTzK70/s1600/carlsbad02.jpg);
background-size: 400px 400px;
}

#slide2{
background-image: url(http://images.exhibit-e.com/www_danzigerprojects_com/2b83d95e.jpg);
background-size: 800px 400px;
}

p.shop-link{
cursor: pointer;
position: absolute;
top: 10px;
left: 20px;
}

#shop-slide1-contents{
	background-color: #FFFFFF;
    border: 1px solid #000000;
    bottom: -525px;
    height: 525px;
    left: -0px;
    margin: 0;
    position: absolute;
    width: 980px;
    z-index:...

JavaScript

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

			if(!!('ontouchstart' in window)){
				$("#nextarrow, #backarrow").hide();
				$(".mid").bind('touchstart', function(){
					timer = setInterval(function() {swipeLeft();}, 50);
				}, function() {
					clearInterval(timer);
				});
				
				function swipeLeft() {
									if(($(".mid").position().left) >= -1880){
									$("#background").stop().animate({
										'left': '-=2px'
									}, 50);
									$(".mid").stop().animate({
										'left': '-=20px'
									}, 50);
									}
								}
			}

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


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



			function slideLeft() {
				if(($(".mid").position().left) >= -1880){
				$("#background").stop().animate({
					'left': '-=2px'
				}, 50);
				$(".mid").stop().animate({
					'left': '-=20px'
				}, 50);
				}
			}

			function slideRight() {
				if(($(".mid").position().left) <= -10){
				$("#background").stop().animate({
					'left': '+=2px'
				}, 50);
				$(".mid").stop().animate({
					'left': '+=20px'
				}, 50);
				}
			}

			}
				

			$("#shop-slide1").click(function() {
			$("#shop-slide1-contents").animate({'bottom': '-0px'}, 1000);
			$(".close").click(function() {
			$("#shop-slide1-contents").animate({'bottom': '-525px'}, 1000);
			});
			});

			$("#shop-slide2").click(function() {
			$("#shop-slide2-contents").fadeIn('slow');
			$(".close").click(function() {
			$("#shop-slide2-contents").fadeOut('fast');
			});
			});


});