Craftyslide slideshow jQuery simple et léger

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

Les options

Voici les options de base de ce slideshow 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/

4 commentaires
  1. Calonne 7 années ago

    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

  2. Auteur
    Admin 7 années ago

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

  3. Calonne 7 années ago

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

  4. Mathieu 7 années ago

    Très chouette sauf sur Ie 7 et 8…

    Dommage qu’il n’est pas compatible

Répondre

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

dix-sept − cinq =

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

CONTACT

We're not around right now. But you can send us an email and we'll get back to you, asap.

Envoi en cours...

©[current-year] WebCSSDesign

Se connecter

Oubli de mot de passe ?