FlexSlider — un Slider flexible et sémantique pour jQuery

FlexSlider est un slider, un de plus, qui permettra de faire défiler vos contenus avec le marquage HTML de votre choix.  FlexSlider est utilisable avec le clavier, ce qui est toujours bon pour l’accessibilité ; son poids plume (6 kb minifié) est également un atout de taille. Il est possible d’ajouter une légende (caption) pour chaque image. Pour cela, une simple balise p sous l’image suffit. Pour plus de sémantique et pour profiter des nouvelles balises apportées dans la hotte du Père Noël HTML5, il faudrait tester FlexSlider avec une balise figure et un bon vieux figcaption des familles. Merci à @allfordesign et @oncletom pour la suggestion 🙂

Marquage HTML

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="slide1.jpg" />
        </li>
        <li>
            <img src="slide2.jpg" />
        </li>
        <li>
            <img src="slide3.jpg" />
        </li>
    </ul>
</div>

Appel Javascript

<script>
    $(window).load(function() {
        $('.flexslider').flexslider();
    });
</script>