Developpez.com

Club des développeurs et IT pro
Plus de 4 millions de visiteurs uniques par mois

RefineSlide :
Un caroussel d'images responsive en CSS3

Le , par FirePrawn, Expert éminent sénior
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 ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de boboss123 boboss123 - Membre éclairé https://www.developpez.com
le 05/12/2012 à 12:42
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 ?
Avatar de SylvainPV SylvainPV - Rédacteur/Modérateur https://www.developpez.com
le 05/12/2012 à 14:50
@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
Offres d'emploi IT
Développeur freelance, poo, php5, html5, javascript natif, jquery
Webstock - Ile de France - Paris (75009)
Développeur javascript - angularjs
MATIERE GRISE - Ile de France - Paris (75000)
Développeur javascript / html 5 h/f
Silkhom - Rhône Alpes - Grenoble (38000)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -