04
AVR

Un slider en mode responsive développé en CSS3 uniquement

Publié le 04/04/12 à 09h22 par DJo

A la fois adapté aux responsive webdesign et vitaminé aux transitions CSS3, ce slider léger est très efficace.

A la fois adapté aux responsive webdesign et vitaminé aux transitions CSS3, ce slider léger est très efficace.

Si vous souhaitez proposer un slider d'images sans Javascript, cette ressource vous conviendra parfaitement.

Basée sur les animations / transitions CSS3, donc compatible uniquement avec navigateurs récents (Oui, il faut sauter le pas!), ce slider est à la fois simple et design.

Le must du slider est sans doute sa réactivité au redimensionnement du navigateur.

Il dispose 3 états de présentation:

  • Le mode navigateur classique avec la photo ci-dessus.
  • Le mode tablette ou résolutions d'écrans basses: Les flèches de navigation sont superposées au slide

CSS3 Responsive Slider - Mode tablette

  • Et le mode smartphone, ou la légende disparait:

CSS3 Responsive Slider - Mode smartphone

Idéal pour une application où vous n'avez pas besoin d'être compatible avec Internet Explorer !

Il faudra toutefois inclure un javascript pour corriger un problème sur iOS, sinon la seule feuille CSS suffit!

 

Site Officiel

Baraguiné par couros2000 le 06/04/12 à 12h34
couros2000 sur La Ferme du Web
Euh c'est moi ou le seul moyen d'avoir le code c'est en épluchant leur page avec Firebug, pas un bouton telechargement ni même un tuto ...
Baraguiné par ZeBigDuck le 10/04/12 à 12h28
ZeBigDuck sur La Ferme du Web
De plus, il n'est pas fonctionnel sous android (navigateur natif). Le seul que j'ai trouvé qui fonctionne est celui-ci http://debray.jerome.free.fr/demos/sliderViewer.html mais le code source est particulièrement laid.

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web