Les points forts

• Léger et modulaire,
• Rapide,
• Contenu dimensionné en CSS,
• Support High-DPI (Retina),

Testé sur desktop et mobile

• Chrome, Safari, FF, Opera, IE8+, support partiel de IE7,
• Android 2.3+, iOS5+, Blackberry 10+, WP7+, mobile Opera, Chrome sur Android.

Un plugin pour WordPress est en préparation ici.

Lire Magnific Popup, A Truly Responsive Lightbox (For jQuery And Zepto.js) paru sur Smashing Magazine.

→ Magnific Popup est disponible sur GitHub.

 Marquage HTML

<ul id="myList1">
    <li>Donec sed odio dui.</li>
    <li>Nullam quis risus eget urna.</li>
    <li><a href="#">Integer posuere era.</a></li>
    <li>Maecenas sed diam eget risus.</li>
    <li>Tortor mauris condimentum.</li>
</ul>

Appel de SwapMyLi

<script>
    $(function() {
        $('#myList1').swapmyli({
            swapTime: 900, // Speed of effect in animation
            transitionTime: 700, // Speed of Transition of ul (height transformation)
            time: 4000, // How long each slide will show
            timer: 1, // Show (1) /Hide (0) the timer.
            css: 1 // Apply swapmyli css on the list elements.
        });
    });
</script>

→ Téléchargez Télécharcher SwapMyLi

Select2 est disponible sur GitHub.

→ Chosen est disponible sur GitHub.

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

Marquage HTML attendu :

<div id="s3slider">
  <ul id="s3sliderContent">
    <li class="s3sliderImage">
      <img src="#">
      <span>Your text comes here</span>
    </li>
    <li class="s3sliderImage">
      <img src="#">
      <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
  </ul>
</div>

Appel du plugin :

$(document).ready(function() {
  $('#s3slider').s3Slider({
    timeOut: 4000
  });
});

→ Voir la démo.

Note : on pourra supprimer la dernière div avec la classe clear au profit d’une autre technique permettant de rétablir le flux !

→ DIYSlider est disponible sur Github.