JSFiddle - React, Tailwind, and code Playground

by rpflorence

HTML

<script src="http://ryanflorence.com/forge/SlideShow-Loop.js"></script>
<div id=slides>
    <img src=http://www.google.com/logos/andersen10-5-hp.gif>
    <h1>Foo!</h1>
    <img src=http://www.google.com/logos/andersen10-3-hp.gif>
    <h1>Bar!</h1>
    <img src=http://www.google.com/logos/andersen10-1-hp.gif>
    <h1>Baz!</h1>
</div>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

CSS

#slides {
    width: 384px;
    height: 150px;
    overflow: hidden;
    margin: auto;
    margin-top: 20px;
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 3px 5px rgba(0,0,0,0.5);    
}

#slides h1,
#slides img {
    width: 100%;
    height: 100%;
}

#slides h1 {
    font-size: 125px;
    text-align: center;
    background: #fff;
}

ul {
    text-align: center;
    margin-top: 10px;
}

li {
    display: inline-block;
    background: #aaa;
    height: 1em;
    width: 1em;
    margin: 0.3em;
    font-size: 16px;
    text-align: center;
    padding: 0.5em;
    -webkit-border-radius: 1em;
    -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.5);
    font-family: helvetica, arial;
    cursor: pointer;
    color: #000;
}

li:hover {
    background: #fff;
}

html* li {
    display: inline;
}

body {
    background: #585858;
}

JavaScript

var slideshow = new SlideShow('slides',{
    delay: 2500
}).play();

var hoverEvents = {
    mouseenter: function(){ slideshow.pause(); },
    mouseleave: function(){ slideshow.play(); }
};

slideshow.element.addEvents(hoverEvents);

var navs = $$('li');

navs.each(function(element, index){
    element.addEvents($merge(hoverEvents,{
        click: function(){
            slideshow.show(index);
        }
    }));
});

slideshow.addEvent('show', function(p,pi,n,ni){
    console.log(ni);
    //navs[pi].tween('background-color','#aaa');
    //navs[ni].tween('background-color','#ccc');
});