JSFiddle - React, Tailwind, and code Playground

by mrienstra

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<div style="text-align: center;">
<div id="slideshow">
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" />
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" />
</div>
</div>

CSS

#slideshow {
    margin: 20px auto;
}

/* Style pager aka nav */

#nav {
    margin-top: 10px;
}

#nav a {
    display: inline-block;
    margin: 0 10px;
    width: 15px;
    height: 15px;
    background: #aaa;
    text-indent: -9000px;
}

#nav a.activeSlide {
    background: #777;
    cursor: pointer;
}

/* Make sure it will look OK without Javascript */

#slideshow {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
}
#slideshow img {
    display: block;
    width: 200px;
    height: 200px;
}

JavaScript

$('#slideshow').after('<div id="nav">')
    .cycle({
        speed:   1500, // speed of the transition (any valid fx speed value)
        timeout: 1, // milliseconds between slide transitions (0 to disable auto advance)
        pager:  '#nav' 
    });