JSFiddle - React, Tailwind, and code Playground

by admiringtheorchid

HTML

<div data-role="page" id="page1">
	<div class="area" id="left"></div>
	<div class="area" id="right"></div>
	<div role="main" class="ui-content">
    		<div class="item" id="1">
			<img src="http://www.leecorbin.co/img1.jpg" width="50%" draggable="false">
			<div class="caption">
				Caption 1
			</div>
			<div class="navigation"> 
	    			<a href="#" class="prevBtn">&lt;&nbsp;</a> 01 / 03 <a href="#" class="nextBtn">&nbsp;&gt;</a>
			</div>
    		</div>
    		<div class="item" id="2">
			<img src="http://www.leecorbin.co/img2.jpg" width="50%" draggable="false">
			<div class="caption">
				Caption 2
			</div>
			<div class="navigation">
				<a href="#" class="prevBtn">&lt;&nbsp;</a> 02 / 03 <a href="#" class="nextBtn">&nbsp;&gt;</a>
			</div>
    		</div>
    		<div class="item" id="3">
			<img src="http://www.leecorbin.co/img3.jpg" width="50%" draggable="false">
			<div class="caption">
				Caption 3
			</div>
			<div class="navigation">
				<a href="#" class="prevBtn">&lt;&nbsp;</a> 03 / 03 <a href="#" class="nextBtn">&nbsp;&gt;</a>
			</div>
    		</div>
	</div>
</div>

CSS

html {	
	height: 100%;
	overflow: hidden;
}
body {	
	margin: 0px;
	padding: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	height: 100%;
}
.ui-content {
	padding: 0;
	margin: 0;
}
.item {
	width: 100%;
	height: 100%;
	text-align:center;
	position:relative;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
div.item > img {
	max-height: 100%;
	max-width: 100%;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}
img {
	-khtml-user-select: none;
	-o-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
}
.navigation {
	position: absolute;
	bottom: 24px;
	right: 16px;
	color: #000;
	width: 100%;
	text-align: right;
	z-index: 2;
}
.caption {
	position: absolute;
	bottom: 24px;
	left: 16px;
	color: #000;
}
a:link, a:visited {
	color: #000;
	text-decoration: none;
	font-weight: normal; 
}
a:hover, a:active {
	color: #999;
	text-decoration: none;
	font-weight: normal; 
}
a.ui-link:hover, a.ui-link:active {
	color: #999;
	text-decoration: none;
	font-weight: normal; 
}
a {
	outline: 0;
}
.area {
    display: none;
}
#left {
	width: 50%; 
	height: 90%; 
	position: absolute; 
	z-index: 1;
	left: 0;
}
#right {
	width: 50%; 
	height: 90%; 
	position: absolute; 
	z-index: 1;
	right: 0;
}

JavaScript

var win;
var els;
function DoResize() {
    var height = win.height(), 
        width = body.width();
    els.each(function(i,el){
        var ele = $(el);
        ele.height(height).width(width);
    });
}

$(document).on("pagecreate", "#page1", function() {
    
    win = $(window), body = $('body');
    els = $('div.item');
    DoResize();
    els.addClass('visible');
    $(window).on('resize', DoResize);

    $(".item").hide().first(0).show();
    
    $(document).on("mousemove", "#page1", function(e) {
        $(".area").show();
    });
    
    $(document).on("swipeleft swiperight", ".area", function(e) {
        $(this).hide();
    });

    $(document).on("swipeleft swiperight", ".item", function(e) {
        var dir = 'prev';
        if (e.type == 'swipeleft') {
            dir = 'next';
        }
        GoToNextSlide($(this), dir);
    });

    $(document).on("click", ".navigation > a", function(e) {
        var dir = 'prev';
        if ($(this).hasClass("nextBtn")) {
            dir = 'next';
        }
        var $item = $(this).closest(".item");
        GoToNextSlide($item, dir);
        e.stopPropagation();
    });
    
    $(document).on("tap", ".item", function(e) {
        var xCoord = e.pageX;
        var halfW = $(this).width() / 2;
        if (xCoord < halfW){
            GoToNextSlide($(this), 'prev');
        } else {
            GoToNextSlide($(this), 'next');
        }
        e.preventDefault();
    });
    
    $(document).on("mouseenter", "#left", function(e) {
        $(this).css('cursor', 'url(http://www.leecorbin.co/back.png), auto');
    });
    
    $(document).on("mouseenter", "#right", function(e) {
        $(this).css('cursor', 'url(http://www.leecorbin.co/forward.png), auto');
    });
    
    $(document).on("click", "#left", function(e) {
        //get visible item
        var $item = $(".item:visible");
        GoToNextSlide($item, 'prev');
    });
        
    $(document).on("click", "#right", function(e) {
        var $item...