AyaSlider est un petit nouveau dans le monde des sliders jQuery fait son entrée. En plus de remplir ses fonctions de slider pour faire défiler les images ou contenu HTML, AyaSlider ajoute une dimension de contenu animé à l’intérieur des slides.

Ainsi, le plugin jQuery propose 2 niveaux d’options, au niveau global :

  • easeIn : Effet d’animation à l’ouverture du slide
  • easeOut : Effet d’animation à la fermeture du slide
  • delay : Délai en ms entre 2 slides
  • next : Sélecteur jQuery pour passer à la slide suivante
  • previous : Sélecteur jQuery pour aller à la slide précédente
  • list : Conteneur des slides

Puis pour chaque slide, on peut définir l’animation interne :

  • top : Point de départ de l’animation en vertical
  • left : Point de départ de l’animation en horizontal
  • opacity : Opacité de départ de l’animation
  • duration : Durée de l’animation
  • delay : Délai avant le démarrage de l’animation
  • ease : Effet

Ainsi, vous pourrez faire apparaître par dessus une image, des contenus HTML designés via du CSS.

Côté code HTML, voici comment ça se passe :

<div id="slideShow"><!-- FIRST SLIDE -->
<div>
<div>Some content to slide</div>
</div>
<!-- SECOND SLIDE -->
<div>Something <img src="./images/bg.png" /></div>
</div>

On défini les slides et on rajoute leurs options dans les attributs data-in et data-out. Chaque élément peut être animé indépendamment via ces attributs.

De quoi réaliser des sliders de contenus dynamiques et originaux.

ayaslider

Source