JSFiddle - React, Tailwind, and code Playground

by Chase Wilson

HTML

<script src="https://raw.github.com/dinoboff/jQswipe/master/jqswipe.js"></script>
<div id="parent">
    <div id="container">
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
        <a href="#"><img src="http://farm6.staticflickr.com/5246/5242633004_9c604facd5.jpg" /></a>
    </div>
    <div style="clear:both"></div>
</div>

<div id="console"></div>

CSS

html,body {height:500px;padding: 0; margin:0}
#parent {width: 100%;height: 100%; overflow: hidden; position: relative}
#container {width: 2000%; position: absolute; top: 0px; left: 0px;}
#container a {display: block;float: left; text-align: center;}
#container a img {width: 90%; margin: 0px auto;} 
#console span {display: block}

JavaScript

$.jQswipe.Swipe.prototype.maxWidth = 100;

var videos = $('#container a');
var videoContainer = $('#container');
var log = function(text) {
    $('#console').append($('<span>'+text+'</span>'));
}
    
var initVid = $(videos[0]).addClass('focused');
var left = 0;
var windowWidth = $(window).width();
var videoWidth = (windowWidth/4)*3;

videos.width(videoWidth);
initVid.css('margin-left',((windowWidth/4)/2));

// document.addEventListener('touchmove', function(e){e.preventDefault()});
function preventDefault(event){
    event.preventDefault();
}

$('#parent')
.bind('touchstart', function() {
    log('here')
    $(document).bind('touchmove',preventDefault);
})
.bind('touchend', function(){
    $(document).unbind('touchmove',preventDefault);
})
.bind('leftSwipe', function() {
    left = left - videoWidth;
    videoContainer.animate({'left': left},250);
    log(left)
})
.bind('rightSwipe', function() {
    left = left + videoWidth;
    videoContainer.animate({'left': left},250);
    log(left)
});


setTimeout(function () {
  if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);