JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery iOS6 Animate Bug</title>
<script type="text/javascript">jQuery.noConflict();</script>

</head>

<body>
    <div id="content_gallery_div">
        <div id="inner_content_gallery_div">
            <div id="slideshow_gallery_div">    
                
                <div id="slideshow_gallery_container_div" style="width:2940px; left:0;">
                
                    <div id="slideshow_gallery_image_1" class="slideshow_image_div">
                        <div style="width:inherit; height:inherit; background:#f00;">Red #f00</div>
                    </div>
                    
                    <div id="slideshow_gallery_image_2" class="slideshow_image_div">
                        <div style="width:inherit; height:inherit; background:#0f0;">Green #0f0</div>
                    </div>
                    
                    <div id="slideshow_gallery_image_3" class="slideshow_image_div">
                        <div style="width:inherit; height:inherit; background:#00f;">Blue #00f</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

@charset "UTF-8";

#inner_content_gallery_div, #content_gallery_div {float:left; width:980px; height:644px;}

.slideshow_image_div {float:left; width:980px; height:644px; -moz-opacity:0.3; -khtml-opacity:0.3; opacity:0.3;}

#slideshow_gallery_container_div {position:absolute; z-index:2; height:644px; overflow:hidden;}

#slideshow_gallery_div {position:absolute; width:980px; height:644px; overflow:hidden;}

JavaScript

"use strict";

jQuery(document).ready(function(e) {    
       slideshowObject.init();
});

var slideshowObject =
{
    "parentContainer": "inner_content_gallery_div",
    "containerWidth": 2940,    
    "currentImageId": 1,
    "imagesArray": [
        {"width": 980, "height": 644, "id": 1},
        {"width": 980, "height": 644, "id": 2},
        {"width": 980, "height": 644, "id": 3},
    ],
    "imageFadeInTime": 500,
    "imageFadeOutTime": 500,
    "name": "gallery",
    "positionX": 0,
    "slideTime": 1000,
    "swipeMove": false,
    "swipeStartX": 0,
    "swipeEndX": 0,    
    "viewportHeight": 644,    
    "viewportWidth": 980,
    init: function (paramObject)
    {
        this.bindPrimarySlideshowSwipeEvents();            
    },
    bindPrimarySlideshowSwipeEvents: function () 
    {
        var $this = slideshowObject;
        
        jQuery("#slideshow_" + $this.name + "_container_div").bind("touchstart", function (e) 
        {
            $this.swipeStartX = e.originalEvent.targetTouches[0].pageX;
        });
        
        jQuery("#slideshow_" + $this.name + "_container_div").bind("touchmove", function (e) 
        {
            $this.swipeEndX = e.originalEvent.targetTouches[0].pageX;
            $this.swipeMove = true;
        });
        
        jQuery("#slideshow_" + $this.name + "_container_div").bind("touchend", function (e) 
        {                
            if ($this.swipeMove === true)
            {        
                if ($this.swipeStartX < $this.swipeEndX) 
                {
                    $this.showPreviousImage();
                }
                else 
                {
                    $this.showNextImage();
                }
    
                $this.swipeMove = false;
            }
        });
    },
    showPreviousImage: function () 
    {
        if (this.currentImageId === 1) 
        {
            this.positionX -= this.containerWidth - this.imagesArray[this.imagesArray.length - 1].width;
            ...