JSFiddle - React, Tailwind, and code Playground
by oroce
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<div class="parent">
<div class="container">
<div class="item" style="border-left-color:yellow;border-right-color:yellow"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:red;border-right-color:red"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:green;border-right-color:green"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:pink;border-right-color:pink"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:purple;border-right-color:purple"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:blue;border-right-color:blue"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:#bada55;border-right-color:#bada55"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:magenta;border-right-color:magenta"><img src="http://placehold.it/298x214" /></div>
</div>
</div>
<div class="parent">
<div class="container">
<div class="item" style="border-left-color:yellow;border-right-color:yellow"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:red;border-right-color:red"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:green;border-right-color:green"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:pink;border-right-color:pink"><img src="http://placehold.it/298x214" /></div>
<div class="item" style="border-left-color:purple;border-right-color:purple"><img src="http://placehold.it/298x214"...CSS
.parent{
width: 300px;
height: 214px;
overflow:hidden;
margin-bottom: 20px;
}
.container{
height: 1712px;
}
.item{
width: 300px;
border-left: solid 1px black;
border-right: solid 1px black;
float:left;
height: 214px;
overflow: hidden;
}JavaScript
/*function onTouchStart( e ){
$( e.currentTarget )
.on( "touchmove", function( e ){
//e.preventDefault();
if( !this._jumpLeft ){
this._jumpLeft = $( e.currentTarget ).offset().left;
}
if( !this._jumpWidth ){
this._jumpWidth = $( e.currentTarget ).width();
}
var clientX = e.clientX;
if( "ontouchstart" in window ){
clientX = ( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] ).clientX;
}
var percent = ( clientX - this._jumpLeft ) / this._jumpWidth;
var pos = percent * 1712;
var value = Math.floor( pos / ( 214 ) ) * (214);
console.log("setting value", value );
$( e.currentTarget )[0].scrollTop = value;
})
.on( "touchend touchcancel", function( e ){
$( e.currentTarget )
.off( "touchmove touchend touchcancel" );
e.preventDefault();
})
};
$( ".parent" )
.on( "touchstart", onTouchStart );*/
$( ".parent" )
.swipe({
allowPageScroll:"vertical",
swipeStatus: function( event, phase, direction, distance, duration, fingerCount ){
if( phase === "move" && (/(left)|(right)/ ).test( direction ) ){
//console.log.apply( console, arguments );
var left = $( event.currentTarget ).offset().left;
var clientX = event.clientX;
if( "ontouchstart" in window ){
console.log(event);
clientX = ( event.touches[0] || event.changedTouches[0] ).clientX;
}
var start = clientX - left;
var percent = ( start ) / 300;
var pos = percent * 1712;
var value = Math.floor( pos / ( 214 ) ) * (214);
event.currentTarget.scrollTop = value;
/*console.log({
percent: percent,
//left: left,
start: start,
pos: pos,
value: value,
//distance: distance
} );*/
console.log( "should move: " +...