Nouveau venu dans le monde des slideshows et sliders de contenu, Adaptor est un slideshow jQuery léger et complet permettant de faire défiler images et contenu grâce à de multiples transitions.
Simple d’utilisation, il vous suffit de déclarer le contenu HTML5 à animer comme ceci :
<div class="slider-viewport"><!-- works as a viewport for the 3D transitions -->
<div id="content-box"><!-- the 3d box -->
<figure><!-- slide --> <img src="img/slide-1.png" />
<figcaption>This is slide one's description</figcaption>
</figure>
<figure><img src="img/slide-2.png" />
<figcaption>This is slide two's description</figcaption>
</figure>
<figure><img src="img/slide-3.png" />
<figcaption>This is slide three's description</figcaption>
</figure>
<figure class="slide"><img src="img/slide-4.png" />
<figcaption>This is slide four's description</figcaption>
</figure>
</div>
</div>
Puis initialiser le slider avec un bout de code jQuery et les options souhaitées :
$('#content-box').boxSlider('option', 'speed', 1200);
Plusieurs transitions sont disponibles:
Deux effets 3D, compatibles Webkit et Firefox, en slide horizontal et vertical (sur les navigateurs non compatibles, l’effet est dégradé sous forme de fade classique). On retrouve aussi des effets plus classiques: Fade, damier, scroll. Autre avantage, il a été testé jusqu’à IE6
Adaptor est léger et permet de charger uniquement les effets souhaités pour optimiser le poids du script. Plusieurs évènements et méthodes vous permettront d’intégrer facilement le slideshow à votre site.