Unslider — Le slider jQuery qui slide, tout simplement

Unslider est un script jQuery qui fait partie de la grande famille des Sliders (aussi appelé Diaporama, Carousel, Présentation, etc.). Son point fort est la sobriété : pas d’effet foufous ou de marquage HTML superflu. Unslider fait le minimum et le fait bien ! Toutefois, ses 3kb n’empêche pas Unslider de répondre à un cahier des charges rigoureux :

• Compatibilité avec les navigateurs — Le grand jeu avec les derniers navigateurs, mais sait se tenir avec les plus anciens.
• Support de la navigation au clavier — Utilisation des touches fléchées droite et gauche.
• Hauteur d’image différente — Toutes les diapos ne sont pas égales et Unslider ajoute une subtile transition entre les slides de hauteur différente.
• Responsive — Parce que les sites non-responsives se font de plus en plus rares.

Le marquage HTML

<div class="banner">
  <ul>
    <li>This is a slide.</li>
    <li>This is another slide.</li>
    <li>This is a final slide.</li>
  </ul>
</div>

Un peu de CSS

.banner { position: relative; overflow: auto; }
  .banner li { list-style: none; }
    .banner ul li { float: left; }

L’appel de Unslider

$(function() {
$('.banner').unslider();
});

Ajout des liens Suivant et Précédent

<!-- The HTML -->
<a href="#" class="unslider-arrow prev">Previous slide</a>
<a href="#" class="unslider-arrow next">Next slide</a>

<!-- And the JavaScript -->
<script>
  var unslider = $('.banner').unslider();
    $('.unslider-arrow').click(function() {
      var fn = this.className.split(' ')[1];

      // Either do unslider.data('unslider').next() or .prev() depending on the className
      unslider.data('unslider')[fn]();
  });
</script>

Ecrans tactiles

Pour finir, si vous désirez ajouter à Unslider les fonctionnalités tactiles pour prendre en compte les écrans touch, il suffit d’inclure le plugin jQuery.event.swipe, et voilà !

→ Unslider est disponible sur GitHub.