ResponsiveSlides.js, un slideshow jQuery « responsive »

12 février 2012
6 764 vues

ResponsiveSlides.js est un plugin jQuery qui permet de mettre en place un slideshow jQuery qui s’adapte à n’importe quel écran grâce à la technique du « responsive design ». Ainsi, le diaporama fonctionne aussi bien sur un écran standard que sur une tablette tactile ou un smartphone.

Un slideshow qui s’adapte

ResponsiveSlides.js génère un diaporama réactif à partir d’une déclaration d’images dans un conteneur unique. Il fonctionne avec une large gamme de navigateurs, y compris toutes les versions d’Internet Explorer. Il assure notamment le support de la proriété CSS max-width sur les navigateurs qui ne le prennent pas en charge nativement (IE6 par exemple). A noter que toutes les images utilisées doivent être de la même taille.

Le point fort du plugin est sa légèreté (792 octets seulement) et ce n’est pas étonnant quand on y regarde d’un peu plus prêt. En effet, le diaporama propose peu d’options et fonctionne uniquement de deux manières différentes : soit le slideshow boucle en lecture automatique, soit l’internaute passe d’une diapositive à l’autre en utilisant la pagination. Vous l’aurez compris, ResponsiveSlides.js est loin d’être aussi complet qu’un FlexSlider, mais il trouvera facilement sa place chez les personnes qui cherchent un outil simple à utiliser, sans avoir à gérer tout un tas d’options.

Mise en place

On commence par déclarer jQuery et le plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

On déclare ensuite la structure HTML : un conteneur et ses images.

<ul id="slides">
  <li><img src="1.jpg" alt="" /></li>
  <li><img src="2.jpg" alt="" /></li>
  <li><img src="3.jpg" alt="" /></li>
</ul>

Et enfin, on termine par appeler le plugin sur notre conteneur.

$(function () {
  $("#slides").responsiveSlides();
});

Les paramètres

  • speed : entier définissant la durée entre deux images en milliseconde
  • fade : entier définissant la durée de la transition en milliseconde
  • auto : booléen définissant l’activation de la lecture automatique
  • maxwidth : entier définissant la largeur maximale du slider en pixel
  • namespace : string définissant le préfixe de l’id CSS de chaque image

Si vous passez le paramètre auto à false, une pagination est automatiquement créée. L’utilisation du paramètre namespace vous permet de modifier les ID par défaut des images, et vous donne par conséquent la possibilité de générer plusieurs slideshow sur la même page.

Voici comment utiliser les paramètres.

$("#slides").responsiveSlides({
  speed: 4000,
  fade: 1000,
  auto: true,
  maxwidth: 800,
  namespace: 'rs'
});

Vous pouvez bien sûr utiliser votre feuille de style CSS pour personnaliser votre slideshow, y compris la pagination. Conçu pour s’adapter à n’importe quelle taille d’écran, ResponsiveSlides.js est compatible avec tous les navigateurs du moment (IE6+, Firefox 2+, Opera 11.5+, Chrome 15+, Safari 2+) et également plusieurs navigateurs mobiles tels que Android browser, iOS Safari, Opera Mobile, Opera Mini, ou encore Firefox Mobile. Bref, un slideshow simple et « responsive » !

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, Safari, IE6+, navigateurs mobiles
Démonstration : http://responsive-slides.viljamis.com/
Licence : MIT

Commentaires

  • Mimine

    Merci. Super pratique.

  • Mimine

    En précisant que la navigation tactile fonctionne plutôt bien.

  • http://www.screenfeed.fr/ Screenfeed

    Je suis justement en train de l’utiliser sur un projet en responsive. Le point positif est qu’il est très léger. Par contre, 3 points qui manquent à mon avis :
    – on ne peut pas avoir la lecture automatique ET la navigation en dessous en même temps.
    – pas de boutons « Suivant » / « Précédent » non plus.
    – l’intégration CSS : chaque slider ayant une classe différente (quand il y en a plusieurs sur une page) et aucune classe en commun, impossible de faire un CSS simple sans en passer par un sélecteur d’attribut [class*="_tabs"] par exemple (pour la navigation justement).

    Bref, je l’utilise quand même car c’est un très bon plugin et je suis arrivé à ce que je voulais mais il a fallut que j’en passe par du js supplémentaire (pour la navigation) et modification du plugin (pour le CSS).
    Donc malgré ces 3 inconvénients je reste très positif pour ce plugin :)

    • http://www.megaptery.com/ Pierrinho

      Merci Screenfeed pour tes remarques pertinentes !

  • Guss Tissier

    Plugin très leger et très simple à mettre en place. Merci !

  • David Torondel

    Bonjour, merci pour l’article ! Une question au passage : est-il possible de rajouter des liens sur chaque image du slideshow ? Par exemple que l’image 1 mène vers telle URL, l’image 2 vers une autre URL, etc. Merci d’avance, David

    • http://www.megaptery.com/ Pierre

      Oui, tu peux ;-)