Links

Usage

.swipe-nav {
    overflow: hidden;
    visibility: hidden;
    position: relative;
}

.swipe-nav-wrap {
    overflow: hidden;
    position: relative;
}

.swipe-nav-wrap > div {
    float: left;
    width: 100%;
    position: relative;
}
                        

<script src="swipe-nav.js"></script>

<div class="swipe-nav">
    <div class="swipe-nav-wrap">
        <div id="0">Slide 0</div>
        <div id="1">Slide 1</div>
        <div id="2">Slide 2</div>
        <div id="3">Slide 2</div>
    </div>
</div>
                        

const element = document.querySelector(
    '.swipe-nav'
);

const swipeNavComponent = swipeNav.create({
    container: element
});

// use touchstart events to manipulate
// slide contents
function touchStart (event) {
    // show, hide, create or remove
    // content based on event.target

    // or set swipe boundaries via
    swipeNavComponent.setIsContentAvailable({
        left:true,
        right: false
    });
}