En ny jQuery-slider: Nivo

Posted by Edvin Brobeck at 01:42

Ä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.

1. 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>
   

2. 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>
   

3. Initiera Nivo-slidern!

   <script type="text/javascript">
   $(window).load(function() {
   $('#slider').nivoSlider();
   });
   </script>
   

All done!

Visa demo

Andra artiklar med liknande innehåll:

Snabbguide till CSS3

Vi  som jobbar med webb står inför en mycket spännande framtid. Utanför dörren står CSS3 och väntar på att släppas [...]

Fler domäner – en WP installation

För att förklara användningsområden av detta lilla enkla wordpress-hack så tänker vi oss att vi driver en verksamhet som säljer [...]

Egna typsnitt på webben.

Inledning. Om du jobbar med webdesign så har du antagligen redan märkt att man är begränsad till att använda de [...]