ResponsiveSlides.js, un slideshow jQuery « responsive »

12 février 2012

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