JSFiddle - React, Tailwind, and code Playground

by bluetidepro

HTML

<script src="http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/jquery.nivo.slider.pack.js,qver=3.3.2.pagespeed.jm.3_ZEExgUbh.js"></script>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<a href="/gallery/611/the-office-then-and-now-photo-gallery"><img src="http://web-images.chacha.com/images/theoffice1-jpg-jun-4-2012-649x220.jpg" alt="Featured Gallery: 'The Office' Then and Now: Photo Gallery" title="Featured Gallery: 'The Office' Then and Now: Photo Gallery" /></a>
<a href="/quiz/563/what-s-your-gamer-personality"><img src="http://web-images.chacha.com/images/gamer-jun-4-2012-649x220.jpg" alt="Featured Quiz: What's Your Gamer Personality?" title="Featured Quiz: What's Your Gamer Personality?" /></a>
</div>
</div>

CSS

.slider-wrapper{width:649px;margin:0px auto}
.nivoSlider{position:relative;width:100%;height:auto}
.nivoSlider img{position:absolute;top:0;left:0}
.nivo-main-image{display:block!important;position:relative!important;width:100%!important}
.nivoSlider a.nivo-imageLink{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:6;display:none;margin:0;padding:0}
.nivo-slice{display:block;position:absolute;z-index:5;height:100%;top:0}
.nivo-box{display:block;position:absolute;z-index:5;overflow:hidden}
.nivo-box img{display:block}
.nivo-caption{position:absolute;left:0;bottom:0;background:#000;color:#fff;width:100%;z-index:8;opacity:0.8;overflow:hidden;display:none;-moz-opacity:0.8;filter:alpha(opacity=8);-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:5px 10px}
.nivo-caption p{margin:0;padding:5px}
.nivo-caption a{display:inline!important}
.nivo-html-caption{display:none}
.nivo-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer}
.nivo-prevNav{left:0}
.nivo-nextNav{right:0}
.nivo-controlNav{text-align:center;width:100px;position:absolute;left:50%;bottom:-30px;margin:0 0 0 -50px;padding:0}
.nivo-controlNav a{cursor:pointer}
.nivo-controlNav a.active{font-weight:700}
.theme-default .nivoSlider{position:relative;background:#fff...

JavaScript

$(document).ready(function() {
    $('#slider').nivoSlider({
        pauseTime: 4300,
    });
});