Äntligen – En riktig Slider
Länge har vi på Bombardier Studio har letat efter ett riktigt bra slider-plugin till jQuery, och länge har vi gått bet och skrivit våra egna. Dock ej längre.
Låt oss presentera: Nivo.
Nivo är utvecklad av dev7studio.com och är ett väldigt enkelt och flexibelt plugin. Det har stöd för flera olika funktioner, varav några av de fräckaste är
- Många nya animationer och transitions (övergångar).
- Tonvis med inställningar
- Stöd för thumbnail-navigering
- Stöd för Nästa/föreg. knappar
- Play Pause
- Tangentbordsnavigering
- Bildtexter
Det låter ju grymt! Hur använder man?
Nivo används på samma sätt som i princip alla andra jQuery plugins.
- Inkludera filerna innanför < head > – taggen
<link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
- Bygg markup-koden för din slider
<div id="slider"> <img src="images/slide1.jpg" alt="" /> <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a> <img src="images/slide3.jpg" alt="" title="This is an example of a caption" /> <img src="images/slide4.jpg" alt="" /> </div>
- Initiera Nivo-slidern!
<script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider(); }); </script>
All done!