touch-slideshow

by Kyle Falconer

HTML

<div id="scroll-outer">
    <ul id="scroll-inner">
        <li class="one">Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.</li>
        <li class="two">Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</li>
        <li class="three">Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.</li>
        <li class="four">Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables.</li>
        <li class="five">Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. Holistically pontificate installed base portals after maintainable products.</li>
        <li class="six">Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</li>
        <li class="seven">Collaboratively administrate turnkey channels whereas virtual e-tailers. Objectively seize scalable metrics whereas proactive e-services. Seamlessly empower fully researched growth strategies and interoperable internal or "organic" sources.</li>
        <li class="eight">Credibly innovate granular internal...

CSS

ul, li, div {
    margin:0;
    padding:0;
}
#scroll-outer {
    position:relative;
    top:0;
    left:0;
    display:block;
    height:200px;
    width:100%;
    overflow:hidden;
}
#scroll-inner {
    position:relative;
    top:0;
    left:0;
    display:block;
    height:100%;
    overflow:hidden;
    transition:left 1s;
    webkit-transition:left 1s;
}
#scroll-inner li {
    display:inline-block;
    height:100%;
    width:320px;
    margin-left:20px;
    margin-right:0;
    float:left;
}
.notransition {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -o-transition: none !important;
    -ms-transition: none !important;
    transition: none !important;
}
.one {
    background-color:rgb(0, 0, 0);
    color : rgb(255, 255, 255);
}
.two {
    background-color:rgb(128, 0, 0);
    color : rgb(255, 255, 255);
}
.three {
    background-color:rgb(0, 128, 0);
    color : rgb(255, 255, 255);
}
.four {
    background-color:rgb(128, 128, 0);
    color : rgb(255, 255, 255);
}
.five {
    background-color:rgb(0, 0, 128);
    color : rgb(255, 255, 255);
}
.six {
    background-color:rgb(128, 0, 128);
    color : rgb(255, 255, 255);
}
.seven {
    background-color:rgb(0, 128, 128);
    color : rgb(255, 255, 255);
}
.eight {
    background-color:rgb(128, 128, 128);
    color : rgb(255, 255, 255);
}

JavaScript

/* JSFiddle only */
(function () {
    // for showing the correct size on mobile devices
    var head = document.getElementsByTagName('head')[0];
    var meta = document.createElement('meta');
    meta.setAttribute('name', 'viewport');
    meta.setAttribute('content', 'width=device-width,initial-scale=1.0');
    head.appendChild(meta);
})();


/* utility functions */
function isArrayLike(o) {
    return (o && o.length != undefined);
}

function childNodes(elem) {
    var children = [];
    if (isArrayLike(elem.childNodes)) {
        for (var i = 0; i < elem.childNodes.length; i++) {
            if (elem.childNodes[i].nodeType == 1) children.push(elem.childNodes[i]);
        }
    }
    return children;
}

/* http://stackoverflow.com/a/6160317/940217 */
function hasClass(ele, cls) {
    return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}



/* global variables */
var scroller = null;

/** @constructor */
function Slideshow(outer, inner) {
    this.outer_frame = outer;
    this.inner_frame = inner;
    this.items = childNodes(this.inner_frame);
    this.currentPos = 0;
    this.lastTouch = null;
    this.amountMoved = 0;
    this.pauseAuto = false;

    var windowWidth = document.documentElement.clientWidth;
    // var windowWidth = window.innerWidth;
    this.itemWidth = Math.floor(windowWidth * 0.80);
    // check if this window.innerWidth is interfering with dpi or device pixel ratio


    this.itemMargin = 10;
    for (var i = 0; i < this.items.length; i++) {
        this.items[i].style.width = this.itemWidth + "px";
        this.items[i].style.marginLeft = this.itemMargin + "px";
    }
    this.inner_frame.style.width = (this.itemWidth * this.items.length *...