JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div id="slideshow" class="pics">
            <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" />
            <img src="http://malsup.github.com/images/beach8.jpg" width="200" height="200" />
        </div>

CSS

.nav { margin: 5px 0 }
#nav a, #s7 strong { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none }
#nav a.activeSlide { background: #ea0 }
#nav a:focus { outline: none; }
#output { text-align: left; }
#nav { text-align: left }
#slideshow { margin: 0 auto }

JavaScript

$(function() {
    $('#slideshow').before('<div id="nav" class="nav">').cycle({
        fx:     'turnDown',
        speed:  'fast',
        timeout: 3000,
        pager:  '#nav',
        before: function() { if (window.console) console.log(this.src); }
    });
});