Nivo Slider
The nivo slider is one of my image sliders of choice. This slider is lightweight, SEO friendly and does not require flash.
This slider works on every modern browser and even iDevices without a hitch. Instillation is simple, check out this page for details:
The Nivo Install and Refrence
If you get stuck on instalation check out this support page.
Here is some basic usage:
The HTML Framework:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!-- Usually in the <head> section --> <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- Then somewhere in the <body> section --> <div class="slider-wrapper"> <div id="slider" class="nivoSlider"> <img src="images/slide1.jpg" alt="" /> <a href="https://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div> </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> |
And now to call the script:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script> |
If your wondering about more options on usage check out this usage page.
Recent Comments