touch-slideshow

by Kyle Falconer

HTML

<div id="scroll-outer"> 
<ul id="scroll-inner">
    <li id="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 id="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 id="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 id="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 id="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 id="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 id="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 id="eight">Credibly innovate granular internal or "organic" sources whereas...

CSS

ul, li, div {
    margin:0;
    padding:0;
}
#scroll-outer {
    position:relative;
    top:0;
    left:0;
    display:block;
    height:200px;
    width:100%;
    overflow-y:hidden;
    overflow-x:auto;
}
#scroll-inner {
    position:relative;
    top:0;
    left:0;
    display:block;
    height:200px;
    width:1600px;
    overflow-y:hidden;
    overflow-x:auto;
}
#scroll-inner li {
    display:inline-block;
    height:200px;
    width:200px;
    float:left;
}

#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);}

::-webkit-scrollbar { 
    display:none;
}

JavaScript

/* JSFiddle only */
function updateStatus(message){
    var a = document.getElementById('status');
    var message_span = document.createElement("p");
    message_span.innerHTML = message;
    a.insertBefore(message_span, a.firstChild);
}

(function(){
    updateStatus('ready');
    updateStatus('ready 2');
})();