JSFiddle - React, Tailwind, and code Playground

by teknoblogo

HTML

<script src="http://nivo.dev7studios.com/scripts/nivo-slider/jquery.nivo.slider.pack.js"></script>
<div id="slider">
    <img src="http://www.teknoblogo.com/wp-content/uploads/2011/03/bom-200x200.jpg" alt="" />
    <a href="http://dev7studios.com"><img src="http://www.teknoblogo.com/wp-content/uploads/2011/03/mindmap-490x200.jpg" alt="" title="#htmlcaption" /></a>
    <img src="http://www.teknoblogo.com/wp-content/uploads/2011/03/mindmap-490x200.jpg" alt="" title="This is an example of a caption" />
    <img src="http://www.teknoblogo.com/wp-content/uploads/2011/03/10-490x200.jpg" alt="" />
</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>

CSS

#slider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}
/*
* jQuery Nivo Slider v2.5
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 
* March 2010
*/


/* The Nivo Slider styles */
.nivoSlider {
    position:relative;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
}
/* Caption styles */
.nivo-caption {
    position:absolute;
    left:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    opacity:0.8; /* Overridden by captionOpacity setting */
    width:100%;
    z-index:8;
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
    position:relative;
    z-index:9;
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}

JavaScript

$(window).load(function() {
    $('#slider').nivoSlider();
});