JSFiddle - React, Tailwind, and code Playground

by admiringtheorchid

HTML

<div class="item" id="1">
    <img src="http://www.leecorbin.co/img1.jpg" width="50%">
    <div class="caption">
        caption 1
    </div>
    <div class="navigation">
        <a href="#" id="1prev">&lt</a> 1 / 3 <a href="#" id="1next">&gt</a>
    </div>
</div>
    
<div class="item" id="2" style="display:none">
    <img src="http://www.leecorbin.co/img2.jpg" width="50%">
    <div class="caption">
        caption 2
    </div>
    <div class="navigation">
        <a href="#" id="2prev">&lt</a> 2 / 3 <a href="#" id="2next">&gt</a>
    </div>
</div>
    
<div class="item" id="3" style="display:none">
    <img src="http://www.leecorbin.co/img3.jpg" width="50%">
    <div class="caption">
        caption 3
    </div>
    <div class="navigation">
        <a href="#" id="3prev">&lt</a> 3 / 3 <a href="#" id="3next">&gt</a>
    </div>
</div>

CSS

html {
    height:100%;
}
body {
    height:100%;
    margin:0;
	padding:0;
}
.ui-page {
    height:100%;
}
div.item {
    width:100%;
    height:100%;
    text-align:center;
    position:relative;
}
.navigation {
    position:absolute;
    bottom:20px;
    right:20px;
}
.caption {
    position:absolute;
    bottom:20px;
    left:20px;
}
div.item > img {
    max-height: 100%;
    max-width: 100%;
}

JavaScript

$(document).ready(function(){
    //Setup function for sizing.
    var win = $(window), body = $('body');
    var els = $('div.item');
    function DoResize() {
        var height = win.height(), 
        width = body.width();
        els.each(function(i,el){
            var ele = $(el);
            ele.height(height).width(width);
            var img = ele.find('img');
            var difference = (height - img.height())/2.0;
            img.css('margin-top',difference+'px');
        });
    }
    $(window).load(function(){
        DoResize();
        els.addClass('visible');
    });
    
    $(window).on('resize', DoResize);
});

$(document).ready(function () {

    $("#1prev").click(function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1").on("swipeleft", function () {
        $("#1").hide();
        $("#3").show();
    });
    $("#1next").click(function () {
        $("#1").hide();
        $("#2").show();
    });
    $("#1").on("swiperight", function () {
        $("#1").hide();
        $("#2").show();
    });

    $("#2prev").click(function () {
        $("#2").hide();
        $("#1").show();
    });
    $("#2").on("swipeleft", function () {
        $("#2").hide();
        $("#1").show();
    });
    $("#2next").click(function () {
        $("#2").hide();
        $("#3").show();
    });
    $("#2").on("swiperight", function () {
        $("#2").hide();
        $("#3").show();
    });

    $("#3prev").click(function () {
        $("#3").hide();
        $("#2").show();
    });
    $("#3").on("swipeleft", function () {
        $("#3").hide();
        $("#2").show();
    });
    $("#3next").click(function () {
        $("#3").hide();
        $("#1").show();
    });
    $("#3").on("swiperight", function () {
        $("#3").hide();
        $("#1").show();
    });

});