Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas metus nulla, commodo a sodales sed, dignissim pretium nunc. Nam et lacus neque. Ut enim massa, sodales tempor convallis et, iaculis ac massa.
CSS <link href="assets/plugins/slider.nivo/nivo-slider.css" rel="stylesheet" type="text/css" /> JAVASCRIPT <script type="text/javascript" src="assets/plugins/slider.nivo/jquery.nivo.slider.pack.js"></script> <script type="text/javascript" src="assets/js/view/demo.nivo_slider.js"></script> HTML <!-- ELASTIC SLIDER --> <div id="ei-slider" class="ei-slider" data-tumbwidth="100"> <ul class="ei-slider-large nomargin"> <!-- Slide 1 --> <li> <img src="assets/images/demo/1200x800/7-min.jpg" alt="image01" /> <div class="ei-title"> <h2>Creative</h2> <h3>Duet</h3> </div> </li> <!-- Slide 2 --> <li> <img src="assets/images/demo/1200x800/8-min.jpg" alt="image02" /> <div class="ei-title"> <h2>Friendly</h2> <h3>Devil</h3> </div> </li> <!-- Slide 3 --> <li> <img src="assets/images/demo/1200x800/9-min.jpg" alt="image03"/> <div class="ei-title"> <h2>Tranquilent</h2> <h3>Compatriot</h3> </div> </li> <!-- Slide 4 --> <li> <img src="assets/images/demo/1200x800/10-min.jpg" alt="image04"/> <div class="ei-title"> <h2>Insecure</h2> <h3>Hussler</h3> </div> </li> <!-- Slide 5 --> <li> <img src="assets/images/demo/1200x800/11-min.jpg" alt="image05"/> <div class="ei-title"> <h2>Loving</h2> <h3>Rebel</h3> </div> </li> <!-- Slide 6 --> <li> <img src="assets/images/demo/1200x800/12-min.jpg" alt="image06"/> <div class="ei-title"> <h2>Passionate</h2> <h3>Seeker</h3> </div> </li> <!-- Slide 7 --> <li> <img src="assets/images/demo/1200x800/13-min.jpg" alt="image07"/> <div class="ei-title"> <h2>Crazy</h2> <h3>Friend</h3> </div> </li> </ul> <!-- Thumbnails --> <ul class="ei-slider-thumbs"> <li class="ei-slider-element">Current</li> <li><a href="#">Slide 1</a><img src="assets/images/demo/150x99/7-min.jpg" alt="thumb01" /></li> <li><a href="#">Slide 2</a><img src="assets/images/demo/150x99/8-min.jpg" alt="thumb02" /></li> <li><a href="#">Slide 3</a><img src="assets/images/demo/150x99/9-min.jpg" alt="thumb03" /></li> <li><a href="#">Slide 4</a><img src="assets/images/demo/150x99/10-min.jpg" alt="thumb04" /></li> <li><a href="#">Slide 5</a><img src="assets/images/demo/150x99/11-min.jpg" alt="thumb05" /></li> <li><a href="#">Slide 6</a><img src="assets/images/demo/150x99/12-min.jpg" alt="thumb06" /></li> <li><a href="#">Slide 7</a><img src="assets/images/demo/150x99/13-min.jpg" alt="thumb07" /></li> </ul> <!-- /Thumbnails --> </div> <!-- /ELASTIC SLIDER -->