Nivo Slider, un slideshow jQuery avec de belles transitions

25 novembre 2010

Nombreux sont les plugins jQuery qui font office de slideshow. En voici un qui sort du lot de par ses superbes transitions ! Nivo Slider gère plus d’une quinzaine de transitions, aussi réussies les unes que les autres.

Des transitions impressionnantes !

Commencez par importer la feuille de style, le plugin Nivo Slider (deux fichiers : le script jQuery et la feuille de style) et la bibliothèque jQuery dans l’entête de votre document HTML. Puis mettez vos images dans une div avec un id « slider ». Vous pouvez utiliser la balise « title » pour faire apparaitre une légende sur vos images.

<div id="slider">
    <img src="images/slide1.jpg"/>
    <img src="images/slide2.jpg"/>
    <img src="images/slide3.jpg"/>
    <img src="images/slide4.jpg"/>
</div>

Côté CSS, la feuille de style est minimaliste. À vous de la compléter comme bon vous semble.

#slider {
    position:relative;
    width:618px; /* à changer en fonction de la largeur de l'image */
    height:246px; /* à changer en fonction de la hauteur de l'image */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
#slider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
#slider a {
    border:0;
    display:block;
}

Et pour finir, la fonction nivoSlider() qui doit être appelée avec la séléction de la div « slider ».

$(window).load(function() {
    $('#slider').nivoSlider();
});

A vous maintenant de mettre en forme votre slider comme vous le souhaitez en modifiant la feuille de style.

Options, thèmes, miniatures…

Plus d’une vingtaine d’options existe ! Tout est configurable : les effets de transition, la vitesse d’animation, le choix de la diapositive de départ, le délai entre deux slides, la navigation au clavier ou encore l’appel de fonctions de callback. Il existe également différents thèmes CSS qui sont à disposition pour personnaliser la mise en forme du slider. Et pour finir, vous trouverez dans la démonstration des exemples d’utilisation avec des miniatures, des légendes, etc… Tout ça est à découvrir sur le site officiel, alors foncez !

[EDIT] : Nivo Slider a beaucoup évolué depuis cet article, le code ci-dessus n’est donc pas à jour. Vous trouverez une documentation complète sur le site du plugin à cette adresse : http://dev7studios.com/nivo-slider/#/documentation.

Requis : jQuery
Démonstration : http://nivo.dev7studios.com/
Licence : MIT

Commentaires

  • bonjour,
    le code était-il encore à jour pour la dernière version nivoslider?
    avez vous essayé avec un code comme ça ?

    <a href=" »>

    This is an example of a HTML caption with a link.

    • Effectivement, l’article que tu as partagé date de 2010 et Nivo Slider a beaucoup évolué depuis. L’article sur Megaptery n’est donc plus à jour ; j’ai mis un [EDIT] pour le signaler. Merci pour l’info.

      • le lien était surtout pour vous montrer le code HTML pour avoir les images dans le slider, avec wp_qery et the_post_thumbnail.

  • http://developer.infoymas.com/jquery/how-to-install-nivo-slider-in-wordpress/
    pour mettre les liens vers CSS et JS, avec un thème enfant.