JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<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" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    <span></span>
    <img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
    <span></span>
</div>

JavaScript

function timeoutfn(currSlideElement, nextSlideElement, options, forwardFlag) {
    var imgtime = 5000;
    var blanktime = 2000;
    if ($(currSlideElement).is('img'))
        return imgtime;
    return blanktime;
};

$(function() { 
    $('#slideshow').cycle({ 
        fx:     'fade',
        speed: 400,
        timeoutFn: timeoutfn
    });
});