JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cashln.com/design/nivo/jquery.nivo.slider.pack.js"></script>
<link rel="stylesheet" href="http://cashln.com/design/nivo/nivo-slider.css">
<div class="row">
<div class="column grid_16"> <!-- Splash --> <div class="splash"> <div class="splash-content"> <div id="htmlcaption" class="nivo-html-caption"> <h1>More traffic to your website</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elitectetur adipis. In ultrices malesuada est eu laoreet. Nullam eget tellus ac lacus bibendum egestas et at libero. Vestibulum commodo magna ut suscipit.</p> <span class="call-to-action-1"><a href="#">Download Now</a></span> <span class="call-to-action-2"><a href="#" data-reveal-id="myModal" data-animation="fade">Enquire Now</a></span> </div> </div> <div id="slider" class="nivoSlider nivo-right theme-default"> <img src="http://cashln.com/design/images/splash.png" alt="" title="#htmlcaption" /> <img src="http://cashln.com/design/images/splash.png" alt="" title="" /> <img src="http://cashln.com/design/images/splash.png" alt="" title="" /> <img src="http://cashln.com/design/images/splash.png" alt="" title="" /> </div> </div><!-- End Splash --> </div><!-- End Grid_16 --> </div><!-- End Row -->
CSS
.nivo-caption {
position: absolute;
left: -100px;
background: #333;
color: #fff;
width: 100px;
height: 275px;
}
JavaScript
$('#slider').nivoSlider({
effect: 'sliceUp',
});