JSFiddle - React, Tailwind, and code Playground

by mrienstra

HTML

<script src="http://malsup.github.com/jquery.cycle.all.js"></script>
<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" />
</div>

CSS

/* 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').cycle({
    speed:    1500, // speed of the transition (any valid fx speed value)
    timeout:  1 // milliseconds between slide transitions (0 to disable auto advance)
});