s3slider : diaporama jQuery avec légende

s3slider est un plugin jQuery qui permet de faire défiler un ensemble de photo accompagné d’un bloc de contenu qui apparaît automatiquement par-dessus l’image. Possibilité de faire apparaître le bloc légende à partir du haut, du bas ou à partir des côtés.

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 !