Discussion :

[FirePrawn]

Créer un caroussel d'images responsives
En CSS3 et avec fallback JavaScript

RefineSlide vous permet de créer un caroussel d'images responsive.

En effet, ce script JavaScript utilise les transitions et les transformations CSS3 pour afficher un caroussel d'images original, attractif et personnalisé.
Il utilise également un fallback JavaScript pour le fondu.

Ce script est très léger et Open Source.
Il supporte les miniatures, les légendes et possède également une API.
Le caroussel ainsi créé propose des images responsive, qui s'adapteront à la navigation sur mobile.

RefineSlide est supporté sur tous les navigateurs récents (IE7+).

Télécharger RefineSlide.

Source : http://alexdunphy.github.com

Et vous ?

Que pensez-vous de ce caroussel ?

[boboss123]

C'est assez impressionnant, on dirait que ça été fait en flash.

Vous savez quelle technique il utilise pour faire les fondus en découpant les images ?
=> l'image est dupliquée x fois dans x div puis les div sont déplacés pour faire l'animation ?

[SylvainPV]

@boboss123: Non je dirais simplement transitions 3D CSS3 On peut en faire des choses maintenant en CSS :
http://jsdo.it/sylvain.pollet.villard/bAYt/fullscreen
Par contre il indique le support pour IE7, là j'imagine que les transitions doivent être moins belles

Plug-in très classe, je m'en servirais sûrement. Pas mal de transitions : Transition type ('random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV') ; attention à ce que ça ne devienne pas une usine à gaz