JSFiddle - React, Tailwind, and code Playground

HTML

<div id="gallery-container" style="width: 290px; height: 290px;">
                    <div id="gallery-slider" style="width: 870px; transition: 250ms; -webkit-transition: 250ms;">
                    
                            <div class="one-slide" style="width: 290px; height: 290px;">
                                <table width="100%" height="100%" align="center" valign="center">
                                        <tbody><tr>
                                            <td>
                                                <span class="slide-counter">1     /3  </span>
                                                <img src="http://www.gravatar.com/avatar/292b4691343aca9c15c091596414a738?s=32&d=identicon&r=PG" data-caption="Product Image">
                                                <h2><span class="slide-caption">Product Image</span></h2>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        
                            <div class="one-slide" style="width: 290px; height: 290px;">
                                <table width="100%" height="100%" align="center" valign="center">
                                        <tbody><tr>
                                            <td>
                                                <span class="slide-counter">2     /3  </span>
                                                <img src="http://www.gravatar.com/avatar/457d6eb226c5bca6bea8246253747753?s=32&d=identicon&r=PG"  data-caption="Remote Control">
                                                <h2><span class="slide-caption">Remote Control</span></h2>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
        ...

CSS

#product-gallery {
}
#product-gallery h3 {
    color: #D00;
    margin-top:20px;
    margin-bottom:6px;
}
#gallery-container {
    overflow:hidden;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    /* the width and height are set by the gallery init function
    width: 320px;
    height: 320px;*/
}
#gallery-slider {
    float: left;
    display: inline;
    padding: 0px;
    margin: 0px;
    margin-bottom: 20px;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;    
    -webkit-transform: translate3d(0px,0px,0px);
    /*background-color: #fafafa;*/
    /* the width of the slider is set by teh gallery function
    width: 1280px; */
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
#gallery-slider .one-slide {
    padding:0px;
	margin:0px;
	/* the width of the slider is set by teh gallery function
    width:320px;
	height:320px; */
	-webkit-transform: translate3d(0px,0px,0px); 
	display: block;
    float: left;	
}
#gallery-slider .one-slide img {
	display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 290px; /*Here 290px is bound with Gallery Control*/ 
    max-width: 100%;
}
#gallery-slider .one-slide h2 {
    position: absolute;
    bottom: 0px;
}
#gallery-slider .one-slide .slide-caption {
    color: white;
    font: bold 14px/20px Helvetica, Sans-Serif;
    font-size: 80%;
    text-shadow: #000 0px 0px 2px;
    letter-spacing: 0px;
    background: black;
    background: rgba(0, 0, 0, 0.2);
    padding: 6px;
    display: block;
}



    #gallery-slider .one-slide .slide-counter
    {

        color: white;
        font: bold 14px/20px Helvetica, Sans-Serif;
        font-size: 50%;
        /*text-shadow: black 0px 0px 2px;*/
        letter-spacing: 0px;
        /*padding-bottom: 6px;*/
        padding-right: 3px;
        padding-left: 3px;
        top: 0px;
        right: 0px;
        position:...

JavaScript

(function ($) {

    //Constants
    var LEFT = "left",
		RIGHT = "right",
		UP = "up",
		DOWN = "down",
		NONE = "none",
		HORIZONTAL = "horizontal",
		VERTICAL = "vertical",
		AUTO = "auto",

		PHASE_START = "start",
		PHASE_MOVE = "move",
		PHASE_END = "end",
		PHASE_CANCEL = "cancel",

		SUPPORTS_TOUCH = 'ontouchstart' in window,
		START_EV = SUPPORTS_TOUCH ? 'touchstart' : 'mousedown',
		MOVE_EV = SUPPORTS_TOUCH ? 'touchmove' : 'mousemove',
		END_EV = SUPPORTS_TOUCH ? 'touchend' : 'mouseup',
		CANCEL_EV = 'touchcancel',

		PLUGIN_NS = 'TouchSwipe';



    // Default thresholds & swipe functions
    var defaults = {

        fingers: 1, 	// int - The number of fingers to trigger the swipe, 1 or 2. Default is 1.
        threshold: 75, 	// int - The number of pixels that the user must move their finger by before it is considered a swipe. Default is 75.


        maxTimeThreshold: null,      // int - Time, in milliseconds, between touchStart and touchEnd must NOT exceed in order to be considered a swipe.


        swipe: null, 	// Function - A catch all handler that is triggered for all swipe directions. Accepts 2 arguments, the original event object and the direction of the swipe : "left", "right", "up", "down".
        swipeLeft: null, 	// Function - A handler that is triggered for "left" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
        swipeRight: null, 	// Function - A handler that is triggered for "right" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
        swipeUp: null, 	// Function - A handler that is triggered for "up" swipes. Accepts 3 arguments, the original event object, the direction of the swipe : "left", "right", "up", "down" and the distance of the swipe.
        swipeDown: null, 	// Function - A handler that is triggered for "down" swipes....