Sat. Oct 26th, 2019

Host your Website

Read and learn

Création d'un diaporama en HTML et en CSS

1 min read



Création d’un diaporama en HTML et en CSS

Dans ce nouvel exercice, nous allons essayer de créer un diaporama en n’utilisant que les deux langages HTML et CSS.

Il ne va pas nous être possible de créer un “vrai” diaporama à proprement parler, c’est-à-dire un diaporama pouvant charger dynamiquement les images et possédant des boutons pour passer d’une image à l’autre mais nous allons pouvoir réaliser quelque chose qui va s’en approcher.

Pour faire cela, nous allons utiliser la propriété CSS animation de façon judicieuse.

Nous allons présenter ici deux utilisations différentes de la propriété animation qui vont résulter en deux diaporamas au fonctionnement différent.

Retrouvez le script complet de ce tutoriel HTML / CSS sur mon site : http://pierre-giraud.com/home.php.

N’hésitez pas à mettre un pouce bleu ou un commentaire, merci d’avance !

39 thoughts on “Création d'un diaporama en HTML et en CSS

  1. Bonjour, Merci pour votre tuto. Petite question y at'il une option pour définir le delay d'affichage de chaque photo, animation-duration est pour la diapo et non chaque, mais si l'on souhaite que la premiere image s'affiche 300s, et la seconde image seulement 100s sur le même diaporama. Merci

  2. Bonjour,
    merci encore pour tous ces précieux conseils!
    j'ai réalisé le premier diaporama qui fonctionne très bien sur chrome, mais il ne s'affiche ni sur internet explorer ni sur edge… si quelqu'un peut m'apporter son aide…merci à vous.

  3. Bonjour,
    J'ai recopier le code HTML et CSS mais cela ne fonctionne pas.
    Pouvez-vous me donner le code svp ? Merci !

  4. Bonjour, Qui a expérimenté réellement la méthode 1 ? Je n'obtiens pas d'effet de fondu et j'aurais bien voulu savoir quel paramètres dans le CSS gère cet effet ? (si fondu , il y a effectivement !). Merci beaucoup.

  5. bjr quelqu'un pourrait m'aider ? j'ai realisé la première methode mais lorsque je veut l'afficher il n'y a rien a par le titre.

  6. salut vraiment votre tutoriel ma pris beaucoup mais je voulais poser quelle que question comment vous avez mis les images dans une seule image moi je tout fait j’ai pas puis aider moi s'il vous plais merci ?

  7. Bon tuto ! Malheureusement j'ai un 'diapo' de 150 photos, et à chaque nouvelle photo affichée, il y a comme un flash, le css a du mal a arriver au chemin je pense, aurais-tu une solution?

  8. Bonjour Piere Giraud ! tout d'abord merci pour les tuto mais je n'arrive pas a comprendre pourquoi mes image defile du haut vert le bas et non comme ds la video ( j'espere avoir une reponse! merci

  9. merci pour les tuto Pierre franchement je les like toutes surtout continu a nous faire de telles tuto principalement pour une fonction précise
    merci d'avance

  10. Salut Pierre, j'ai un petit soucis.

    En utilisant la méthode 1 un scintillement se produit au passage d'une image à l'autre. De ce fait, le background du body se voit l'espace d'une demi-seconde. Ce scintillement ne se produit qu'une fois, lors du 1er défilement d'images.

    A quoi cela pourrait-être dû ? Est-ce le chargement des images qui rentre en jeu et si oui existe-t-il un moyen de les précharger (elles pèsent moins de 100ko).

Comments are closed.

Copyright © All rights reserved. | Newsphere by AF themes.