jQuery simpleSlider

Utilisation basique

• Les images s'affichent à leur taille réelle
• Si les images sont trop grandes elles sont coupées
• La hauteur du slider s'ajuste au contenu des slides

Click me !

$('.slider').simpleSlider();

Images élastiques (en largeur)

• On pourrait le faire en CSS (width:100% sur les images)
  mais c'est déjà prévu en Javascript !
• La hauteur du slider s'ajuste toujours au contenu des slides

Click me !

$('.slider').simpleSlider({
   stretch: 'width'
});

Format fixe et images élastiques

• En CSS on donne une largeur ET une hauteur au slider
• simpleSlider va s'occuper d'étirer le contenu et d'ajuster les images (qui sont coupées si besoin)

.slider { width:300px; height:420px; }

$('.slider').simpleSlider({
   stretch: 'cover'
});

simpleSlider utilise alors la propriété CSS object-fit:cover - ici un magnifique tuto sur le sujet

Format fixe et images élastiques 2

• Même principe, autre mode d'ajustement des images
• Ici on affiche une marge si besoin, et on ne coupe jamais une image

.slider { width:300px; height:420px; }

$('.slider').simpleSlider({
   stretch: 'contain'
});

simpleSlider utilise alors la propriété CSS object-fit:contain - ici un magnifique tuto sur le sujet

Durée d'animation et easing

Vous pouvez changer :

• La durée des transitions (en ms)
• Le easing utilisé (voir les easing possibles avec transitCSS3)

$('.slider').simpleSlider({
   duration: 1500,
   easing: 'easeInOutBack'
});

Par défaut l'animation dure 600 ms, avec le easing 'ease'.

Ajouter des éléments d'interface

• Placez vos éléments d'interface en HTML + CSS (textes ou images)
• Déclarez les boutons "suivant" et/ou "précédent" en Javascript pour les rendre cliquables

<div class="slider">
   <ul>
      ...
   </ul>
   <div class="btn-next">Suivant</div>
   <div class="btn-prev">Précédent</div>
</div>

$('.slider').simpleSlider({
   next: '.btn-next',
   prev: '.btn-prev'
});

/* magouille css pour placer les boutons... */
.slider { position:relative; }
.slider .btn-prev, .slider .btn-next {
   position: absolute; top:15px; 
}
.slider .btn-prev { left:15px; }
.slider .btn-next { right:15px; }

Lecture automatique

$('.slider').simpleSlider({
   speed: 1500
});

En lecture automatique il n'y a plus d'interaction utilisateur possible, ça joue tout seul.