JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="//cdn.jsdelivr.net/nivoslider/3.2/jquery.nivo.slider.js"></script>
<script src="//cdn.jsdelivr.net/nivoslider/3.2/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/nivoslider/3.2/nivo-slider.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/nivoslider/3.2/themes/bar/bar.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/nivoslider/3.2/themes/dark/dark.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/nivoslider/3.2/themes/default/default.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/nivoslider/3.2/themes/light/light.css">
<div id="wrapper">
    <div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider">
            <img src="http://jquery.malsup.com/cycle2/images/p1.jpg" data-thumb="images/toystory.jpg" alt="" />
            <a href="http://dev7studios.com">
                <img src="http://jquery.malsup.com/cycle2/images/p2.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
            </a>
            <img src="http://jquery.malsup.com/cycle2/images/p3.jpg" data-thumb="images/walle.jpg" alt="" />
            <img src="http://jquery.malsup.com/cycle2/images/p4.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
        </div>
        <div id="htmlcaption" class="nivo-html-caption">
            <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
        </div>
    </div>
    
</div>

JavaScript

$(window).load(function() {
    $('#slider').nivoSlider({
        boxCols: 27,
        effect: 'boxRain',
        animSpeed: 700,
        pauseTime: 6000
    });
});