RefineSlide - Un slider d'images responsive avec transitions 3D

RefineSlide est un plugin jQuery permettant de créer un slider d'images compatible responsive webdesign et doté de multiples transitions du plus bel effet.

Arrivé il y'a quelques mois dans le monde des sliders / slideshow d'images, RefineSlide impose son style en proposant une multitude de transitions, notamment via des animations CSS3 3D.

Totalement dans l'ère mobile, il s'adapte parfaitement aux résolutions et peut donc être facilement intégré dans un responsive webdesign.

On retrouve donc une dixaine de transitions:

La majorité d'entre elles se font via des transitions CSS ou des 3D transform.

Toutefois, un fallback javascript est prévu pour notre cher IE à partir de la version 7. (Effet de fade uniquement).

On retrouve d'autres fonctionnalités intéressantes comme la génération de miniatures qui peuvent servir à la navigation, ou encore la possibilité d'ajouter des légendes HTML par dessus les slides.

Côté HTML, comme la plupart des sliders, il suffit de déclarer ses images dans une liste:

<ul class="rs-slider">
    <li>
        <img src="img1.jpg" alt="" />
        <div class="rs-caption rs-bottom">
            <!-- HTML content here -->
        </div>
    </li>
    <li>
        <a href="#">
            <img src="img2.jpg" alt="" /> <!-- This slide is clickable -->
        </a>
    </li>
</ul>

Ensuite, il ne reste plus qu'à instancier le script avec les options souhaitées:

$(document).ready(function () {
        $('.rs-slider').refineSlide({
            transition         : 'fade',
            transitionDuration : 7000,
            autoPlay           : true,
            keyNav             : false,
            delay              : 0,
            controls           : null
        });
    });

Vous pourrez ainsi transformer votre slider en slideshow avec un mode auto play, définir les modes de navigation possible (clavier, flèches, miniatures...)

Et comme tout bon plugin jQuery qui se respecte, on pourra contrôler facilement le slider à partir de son API et de ses évènements.

Un sliders / slideshow complet moderne à utiliser dans vos prochains projets !

Site Officiel