JSFiddle - React, Tailwind, and code Playground

by waxwing

HTML

<div id="container" class="animate">
    <div id="f1" class="item"></div>
    <div id="f2" class="item"></div>
    <div id="f3" class="item"></div>
</div>

CSS

.item {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0;
}
#f1 {
    background-color: red;
    left: -100%;
}
#f2 {
    background-color: blue;
    left: 0;
}
#f3 {
    background-color: green;
    left: 100%;
}
#container {
    width: 90%;
    margin-left: 5%;
    position: relative;
    height: 300px;
    left: 0;
    border: 1px solid #aaa;
}
.animate {
    -webkit-transition: left 0.3s;
}

JavaScript

//$('.item').attr('draggable', 'true');






// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
// The idea here is to allow the developer to register listeners for the
// basic mouse events, such as mousedown, mousemove, mouseup, and click,
// and the plugin will take care of registering the correct listeners
// behind the scenes to invoke the listener at the fastest possible time
// for that device, while still retaining the order of event firing in
// the traditional mouse environment, should multiple handlers be registered
// on the same element for different events.
//
// The current version exposes the following virtual events to jQuery bind methods:
// "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel"

//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
//>>description: Normalizes touch/mouse events.
//>>label: Virtual Mouse (vmouse) Bindings
//>>group: Core

(function( $, window, document, undefined ) {

var dataPropertyName = "virtualMouseBindings",
	touchTargetPropertyName = "virtualTouchID",
	virtualEventNames = "vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split( " " ),
	touchEventProps = "clientX clientY pageX pageY screenX screenY".split( " " ),
	mouseHookProps = $.event.mouseHooks ? $.event.mouseHooks.props : [],
	mouseEventProps = $.event.props.concat( mouseHookProps ),
	activeDocHandlers = {},
	resetTimerID = 0,
	startX = 0,
	startY = 0,
	didScroll = false,
	clickBlockList = [],
	blockMouseTriggers = false,
	blockTouchTriggers = false,
	eventCaptureSupported = "addEventListener" in document,
	$document = $( document ),
	nextTouchID = 1,
	lastTouchID = 0, threshold,
	i;

$.vmouse = {
	moveDistanceThreshold: 10,
	clickDistanceThreshold: 10,
	resetTimerDuration: 1500
};

function getNativeEvent( event ) {

	while ( event && typeof...