Démos

Toutes les démos

<>

Couverture du livre CSS3 Le design web moderne

Livre CSS3

Le design web moderne

Plus d'infos sur le site officiel

En vente sur Amazon, FNAC, Dunod

Suivre

Actualités du site CSS3Create

Actualités sur CSS et le web en général

Slider Galerie photos en CSS3

Créer une galerie photo avec défilement automatique sans Javascript

Création: octobre 2010Modifié:

  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
  • Abarth 500
Contenu
Full CSS Pas de JavaScript
Navigateurs
Firefox Safari Chrome Opera Internet Explorer
Partagez
Facebook Twitter

Votez

42 votes3.83

Réaliser une galerie photo avec défilement automatique avec CSS uniquement, sans utilisation de JavaScript.

Utilisation des animations CSS pour réaliser cet effet. L’animation totale dure 20s : 14% d’affichage de photo, 2% de slide vers la photo suivante et 4% pour revenir sur la première photo.

ul{
    width:1800px;
    -webkit-animation: animNom 20s ease 0s infinite;
       -moz-animation: animNom 20s ease 0s infinite;
        -ms-animation: animNom 20s ease 0s infinite;
         -o-animation: animNom 20s ease 0s infinite;
            animation: animNom 20s ease 0s infinite;
}

@keyframes animNom {
from, 14%, to {transform:translateX(0px);}
16%, 30% {transform:translateX(-300px);}
32%, 46% {transform:translateX(-600px);}
48%, 62% {transform:translateX(-900px);}
64%, 78% {transform:translateX(-1200px);}
80%, 96% {transform:translateX(-1500px);}
}  

Note : n’oubliez pas d’ajouter tous les préfixes sur les @keyframes.

L’effet réalisé dans cet exemple est assez simple. Aller plus loin avec cet article : Slider Galerie photos "en boucle" en CSS3

Envie d'une nouvelle démo?

Un p'tit mot...

#1par Dan, le 9 octobre 2011

Totalement fabuleux !
Je développe depuis 15 ans et j’ai toujours réussi à éviter JS ;-)
Me voilà comblé.
Merci, je vais potasser grave !

#2par Kikimagik, le 20 décembre 2011

Bonjour,
Comment fais-tu pour que les photos ne défilent que dans la fenêtre (div) au fond blanc ? C’est problématique car moi elle défilent sur toutes la longueur de la page :/

#3par css3create, le 21 décembre 2011

@Kikimagik : regardes du côté de overflow : hidden ;

#4par Kikimagik, le 21 décembre 2011

@css3create : Merci de ton aide, cela fonctionne très bien ;)

#5par Philippe, le 2 juillet 2012

Bonjour,
Super votre idée de Slide show. Je l’ai réadapté pour faire défiler les bannières de mes sponsors sur mon site http://saintlaurentneige.fr/slnv2/i... . J’ai en plus repris votre idée sur les effets de dégradé sur texte style twiter afin de faire apparaître et disparaître mes bannières dans un effet de fondu. Je ne sais pas si cela marche avec IE, mais avec tous les autres navigateurs, cela fonctionne bien. Merci encore pour toutes ces bonnes idées que vous mettez à dispo des internautes….

#6par helène, le 22 octobre 2012

Bonjour,

votre tuto est super mais j’aimerai savoir comment appliquer cette méthode dans une seule et même page pour des images rangées par catégorie (il ne faut pas que les images apparaissent tout en même temps ?)

Je veux pouvoir faire apparaitre les images d’une catégorie depuis un menu.
La solution viable que j’ai trouvé est de créer une page pour chacune des catégories

merci d’avance !

#7par Marmitte, le 11 décembre 2012

Bonjour,
Super tuto que j’ai essayé d’adapter (affichage un peu plus fluide)... mais qui ne fonctionne ni sur IE, ni sur Chrome... http://pict-horse.fr/haras-d-elle2/...
Sauriez-vous me dire d’où ça vient ?
Dans mon css, j’ai simplement mit :
@keyframes slideAnim
100%margin-left :-800px ;

Et savez-vous pourquoi l’animation ralenti ??
Merci d’avance pour vos réponses, et pour tout ce que ce site peut apporter !

#8par css3create, le 11 décembre 2012

@Marmitte : Il te manque certainement les préfixes ! Faire des copier-coller c’est bien mais comprendre c’est encore mieux ! :p

#9par Joupi, le 27 février 2013

Bonjour, et merci pour ce site.
Etrange, je ne vois pas s’afficher la démo en début d’article. J’ai remarqué cela également sur d’autres articles (je suis sur Firefox 19)

#10par janibel31, le 8 novembre 2013

Bonjour,

Dans une page après une image flottante + un texte + du texte en dessous j’ai mis un titre "quelques réalisations". Sous ce titre je voudrais placer un diaporama de 6/8 images.

Je voudrais un diaporama simple :

- centrer dans la largeur de la page

- avec une commande manuelle (boutons à gauche et à droite qui permettent de faire avancer l’image dans un sens ou dans un autre)

- mettre une légende sous chaque image.

J’ai cherché sur le net. il y a des tutoriels qui offrent de tas de possibilités et que je ne comprends pas. Je cherche un tutoriel ou la démarche de construction est expliquée pas à pas.

J’ai un répertoire pour le projet de site et ensuite des dossiers :Css, images, video. Puis des fichiers pour chaque page.

Si quelqu’un pouvait me renseigner.

Meilleures salutations


modération à priori

Ce forum est modéré à priori : votre contribution n'apparaîtra qu'après avoir été validée par un administrateur du site.

Un message, un commentaire ?
    Qui êtes-vous ? (optionnel)
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)