Craftyslide slideshow jQuery simple et léger

craftyslide

Voici un nouveau venu dans l’univers des slideshows : Craftyslide. Simple, léger et efficace il a tout ce qu’il faut pour satisfaire.

Les options

Voici les options de base de ce jQuery :

  • width : largeur du diaporama (en pixel)
  • height : hauteur du diaporama (en pixel)
  • pagination : booléen pour la pagination  (« true » ou « false »)
  • fadetime : vitesse d’animation entre deux diapositives (en ms)
  • delay : durée entre deux transitions (en ms)

Installation

<!-- CSS -->
<link rel="stylesheet" href="css/craftyslide.css" />
<!-- jQuery Library -->
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!-- Craftyslide Plugin -->
<script src="js/craftyslide.js"></script>
<script>
  $("#slideshow").craftyslide();
</script>

Utilisation HTML

<div id="slideshow">
  <ul>
    <li>
      <img src="image1.jpg" title="Lorem ipsum dolor sit amet" />
    </li>

    <li>
      <img src="image2.jpg" title="Lorem ipsum dolor sit amet" />
    </li>

    <li>
      <img src="image3.jpg" title="Lorem ipsum dolor sit amet" />
    </li>
  </ul>
</div>

slideshow jquery
Simple rapide, léger et efficace. Tout ce que l'on aime!

Site officiel et Démonstration : http://projects.craftedpixelz.co.uk/craftyslide/

A voir aussi

  • Calonne

    Bonjour,

    Est-il possible d’ajouter une vitesse d’animation sur cette démo ? (au lieu de cliquer sur les petits ronds en bas des images ?). Et si oui, comment ?
    Merci pour votre réponse.

    Lucie

  • Admin

    un exemple des options
    $(« #slideshow »).craftyslide({
    ‘width’: 640,
    ‘height’: 400,
    ‘pagination’: false,
    ‘fadetime’: 500,
    ‘delay’: 2500
    });

  • Calonne

    Merci beaucoup pour votre réponse, c’est impeccable !

  • Mathieu

    Très chouette sauf sur Ie 7 et 8…

    Dommage qu’il n’est pas compatible

Réseau

Sites