JSFiddle - React, Tailwind, and code Playground

by rfringuello89

HTML

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<body>
        <div id="container" style="background-color: grey; border-color: black; border-width:4px; border-style:solid; width: 200px; height:200px; position:absolute; top:200px; left:200px">
        	<div class="swipeable" ondragstart="return false;" onselectstart="return false;" data-page-id="0" style="background-color: red; height: 200px; width: 200px; position:absolute; top: 0px; left:-200px">content1</div>
        	<div class="swipeable" ondragstart="return false;" onselectstart="return false;" data-page-id="1" style="background-color: green; height: 200px; width: 200px; position:absolute; top: 0px; left:0px">content2</div>
        	<div class="swipeable" ondragstart="return false;" onselectstart="return false;" data-page-id="2" style="background-color: yellow; height: 200px; width: 200px; position:absolute; top: 0px; left:200px">content3</div>
        </div>
        
        
        
    </body>

JavaScript

var currentShown=1;
    	
    	$( document ).ready(function() {
			$(".swipeable").on("swiperight",			
				function(event){ 
					currentShown = $(this).data("pageId")+1;
										
					$( this ).animate({
					    left: "+=200",
					}, 1000, function() {
					    // Animation complete.
					});
				});
				
			$(".swipeable").on("swipeleft",			
			function(event){ 
				currentShown = $(this).data("pageId")-1;
				
				$( this ).animate({
				    left: "-=200",
				}, 1000, function() {
				    // Animation complete.
				});
								
				
			});
		});