JSFiddle - React, Tailwind, and code Playground

by Erik Zanker

HTML

<div data-role="page" id="page1">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <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="#" class="prevBtn">&lt</a> 
                1 / 3 
                <a href="#" class="nextBtn">&gt</a>
            </div>
        </div>
        <div class="item" id="2">
            <img src="http://www.leecorbin.co/img2.jpg" width="50%" />
            <div class="caption">caption 2</div>
            <div class="navigation"> <a href="#" class="prevBtn">&lt</a> 2 / 3 <a href="#" class="nextBtn">&gt</a>

            </div>
        </div>
        <div class="item" id="3">
            <img src="http://www.leecorbin.co/img3.jpg" width="50%" />
            <div class="caption">caption 3</div>
            <div class="navigation"> <a href="#" class="prevBtn">&lt</a> 3 / 3 <a href="#" class="nextBtn">&gt</a>

            </div>
        </div>
    </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).on("pagecreate", "#page1", function () {
    $(".item").hide().first(0).show();

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

});

function GoToNextSlide($item, direction) {
    var $next;
    if (direction == 'next') {
        $next = ($item.next().length > 0) ? $next = $item.next() : $next = $(".item").first();
    } else {
        $next = ($item.prev().length > 0) ? $next = $item.prev() : $next = $(".item").last();
    }
    
    $item.fadeOut(function () {
        $next.fadeIn();
    });
}