JSFiddle - React, Tailwind, and code Playground
by Vladimir
HTML
<script src="http://nivo.dev7studios.com/wp-content/plugins/nivo-slider/scripts/nivo-slider/jquery.nivo.slider.pack.js?ver=3.4.2"></script>
<link rel="stylesheet" href="http://nivo.dev7studios.com/wp-content/plugins/wp-highlightjs/styles/nivo.css">
<link rel="stylesheet" href="http://nivo.dev7studios.com/wp-content/uploads/nivo-themes/nivo/nivo.css?ver=3.4.2">
<div role="main" id="content">
<h2>Nivo Slider with Default Theme & Default Settings</h2>
<div style="width:700px;margin:40px auto;">
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div style="width:700px;height:300px;" class="nivoSlider" id="nivoslider-125"><img alt="" src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png"><img alt="" title="#nivoslider-125-caption-0" src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png"><img alt="" src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png"></div>
</div>
<div class="nivo-html-caption" id="nivoslider-125-caption-0">You can add captions too…</div>
<p><script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-125").nivoSlider({
effect:"random",
slices:15,
boxCols:8,
boxRows:4,
animSpeed:500,
pauseTime:3000,
startSlide:0,
directionNav:true,
controlNav:true,
controlNavThumbs:false,
pauseOnHover:true,
manualAdvance:false
});
});
</script>
</p></div>
<div class="page-link"><span>Pages:</span> 1 <a href="http://nivo.dev7studios.com/demos/2/">2</a> <a href="http://nivo.dev7studios.com/demos/3/">3</a> <a href="http://nivo.dev7studios.com/demos/4/">4</a></div>
<br>
<div id="features-bot">
<a class="pricing" href="http://nivo.dev7studios.com/pricing">Download Now</a>
</div>
</div>