JSFiddle - React, Tailwind, and code Playground

by kapilgopinath

HTML

<div id="outer">
    <div id="pagination" class="pagination"></div>
    <div id="overlay"></div>
    <div id="inner"></div>
</div>
<?php $arr='' ; for($i=1; $i<9; $i++){ $arr[]='images/' .$i. '.jpg'; } echo json_encode($arr);

CSS

#outer {
    width:768px;
    height:500px;
    border: solid 2px;
    overflow:hidden;
    position:relative;
    margin:0 auto;
    text-align: center;
}
#inner {
    width:768px;
    position:absolute;
    top:0;
}
#inner div {
    height:500px;
}
img {
    width:768px;
    height:500px;
}
#overlay {
    background: transparent url('images/ajax-loader.gif') no-repeat;
    position:absolute;
    top: 40%;
    left: 40%;
    width: 66px;
    height: 66px;
    z-index: 1000;
    display:none;
}
.pagination {
    position: absolute;
    z-index: 20;
    left: 10px;
    top: 10px;
}
.swiper-pagination-switch {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: #555;
    margin: 0 0px 5px;
    opacity: 0.8;
    border: 1px solid #fff;
    cursor: pointer;
}
.swiper-active-switch {
    background: #fff;
}

JavaScript

function swipedetect(el, callback) {
    var touchsurface = el,
        swipedir,
        startX,
        startY,
        distX,
        distY,
        threshold = 150, //required min distance traveled to be considered swipe
        restraint = 100, // maximum distance allowed at the same time in perpendicular direction
        allowedTime = 300, // maximum time allowed to travel that distance
        elapsedTime,
        startTime,
        handleswipe = callback || function (swipedir) {}

    touchsurface.addEventListener('touchstart', function (e) {
        var touchobj = e.changedTouches[0]
        swipedir = 'none'
        dist = 0
        startX = touchobj.pageX
        startY = touchobj.pageY
        startTime = new Date().getTime() // record time when finger first makes contact with surface
        e.preventDefault()

    }, false)

    touchsurface.addEventListener('touchmove', function (e) {
        e.preventDefault() // prevent scrolling when inside DIV
    }, false)

    touchsurface.addEventListener('touchend', function (e) {
        var touchobj = e.changedTouches[0]
        parId = e.target.parentNode.id.replace(/^\D+/g, ''); // get the id of parent element
        distX = touchobj.pageX - startX // get horizontal dist traveled by finger while in contact with surface
        distY = touchobj.pageY - startY // get vertical dist traveled by finger while in contact with surface
        elapsedTime = new Date().getTime() - startTime // get time elapsed
        if (elapsedTime <= allowedTime) { // first condition for awipe met
            if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) { // 2nd condition for horizontal swipe met
                swipedir = (distX < 0) ? 'left' : 'right' // if dist traveled is negative, it indicates left swipe
            } else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) { // 2nd condition for vertical swipe met
                swipedir = (distY < 0) ? 'up' : 'down' // if dist...