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%;
}
.item {
    width:100%;
    height:100%;
    text-align:center;
}
.navigation {
    position:absolute;
    bottom:20px;
    right:20px;
}
.caption {
    position:absolute;
    bottom:20px;
    left:20px;
}

JavaScript

$(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();
    });

});