Coder un slider en CSS super facilement

Поділитися
Вставка
  • Опубліковано 29 гру 2024

КОМЕНТАРІ • 33

  • @EcoleduWeb
    @EcoleduWeb  Рік тому +1

    🎓 Tous mes cours sur l'École du Web (pour les obtenir tous d'un coup) : www.ecole-du-web.net/
    📚 Tous mes cours sur UDEMY : liste-des-cours.com/

  • @LePhenixGD
    @LePhenixGD 11 місяців тому +2

    Super cool la formule pour faire une pause ! Je savais déjà faire une pause avec les keyframes, mais je n'avais pas un moyen de le faire avec plusieurs éléments !

  • @xeladre5019
    @xeladre5019 Рік тому

    Honnetement je ne comprend pas pourquoi tu n'arrive pas a percer car ton travail est vraiment FOU !
    Merci a toi et bonne chance

    • @EcoleduWeb
      @EcoleduWeb  Рік тому +5

      Merci beaucoup, et je suis déjà satisfait de mon actuelle percée 😁

    • @ambreblanc8815
      @ambreblanc8815 Рік тому +2

      Le travail de Enzo est remarquable, ses formations au top ! 💖
      Pas besoin d'avoir une chaîne trop "grand public"!
      Et puis ça veut dire quoi "percer" ? Ici, on fait du code front-end, on n'est pas dans le monde du divertissement... 😉

  • @mah_moud224
    @mah_moud224 Рік тому

    Parfaitement bien expliqué 🫡

  • @fayardfayard9926
    @fayardfayard9926 11 місяців тому

    Très bonne explication.

  • @bernadetkn
    @bernadetkn 2 місяці тому

    Salut je me demande si ce processus peut fonctionner avec des images à la place du texte ?

  • @nawalmouhallil99
    @nawalmouhallil99 Рік тому

    bonsoir; un grand merci pour sette video interessante , juste une question, comment inserer des images aulieu du texte et faire une galerie mais elle stoppe dan la derniére image? merci d'avance

  • @kinsou3865
    @kinsou3865 2 роки тому +2

    j'ai bien aimer, ça serait cool des vidéos sur des langage plus orienté C#, Python, etc je pense que ça plairait 🙂

    • @khaledsanny4817
      @khaledsanny4817 2 роки тому +2

      lol non ça plairait pas 😂 que C#… cette chaîne est axé frontend … faut pas perdre son identité

  • @Histoires_Citations
    @Histoires_Citations 2 роки тому

    Belle vidéo ! Explicatives claires

  • @moiselelonkongo6111
    @moiselelonkongo6111 2 роки тому

    très cool une explication très lucide merci.

  • @mohammedelhoussni
    @mohammedelhoussni 2 роки тому

    Trés bon technique merci

  • @rocramos6091
    @rocramos6091 2 роки тому

    Super vidéo comme l'ensemble de tes contenus et tes formations.
    J'aurais cependant une question. Tu penses pas que ce slider dans l'état actuel si on le garde comme ça poserait un problème de UX ?
    C'est-à-dire qu'il défile à l'infini sans que l'utilisateur puisse ni l'arrêter ni passer à la slide ou slide précédente ?
    Bonnes fêtes de fin d'année

    • @EcoleduWeb
      @EcoleduWeb  2 роки тому +5

      Salut et merci !
      Tout dépend de l'utilisation, je vois bien ce Slider pour un composant "testimonials" par exemple.
      Mais si l'utilisateur cherche à le manipuler, alors il vaut mieux utiliser du JS en effet 👍

  • @TheGetbackers007
    @TheGetbackers007 2 роки тому

    Super vidéo ! Est-ce possible de l'améliorer pour que l'animation se lance par un clic et non automatiquement toujours en pure CSS ? Si oui , comment ? Merci d'avance !

    • @EcoleduWeb
      @EcoleduWeb  2 роки тому +2

      Merci ! On peut, notamment avec l'astuce des checkboxes et la pseudo-classe :checked.
      Néanmoins, ça allourdit pas mal le code et ce n'est pas super maintenable.

  • @choukrout428
    @choukrout428 10 місяців тому

    Bonjour, quand je nomme l'animation, ca ne fonctionne pas, je ne trouve pas où j'ai fait une erreur😅

    • @EcoleduWeb
      @EcoleduWeb  10 місяців тому +1

      Salut, le code est en description 👍

  • @nutnut4868
    @nutnut4868 Рік тому

    Hello! C'est quoi le nom de cet ide svp?? mercii :)

  • @freedyx2.045
    @freedyx2.045 Рік тому

    Ça marche avec des photos je suppose ?

  • @alyssaaly7442
    @alyssaaly7442 Рік тому

    Merci pour la vidéo, y'en n'a pas bcp qui expliquent le principe du slide , mais c'est pas très clair... dommage :( essayé de le faire avec 2 images ca n'a pas fonctionné

    • @EcoleduWeb
      @EcoleduWeb  Рік тому +2

      Salut, le code est en description et il suffit de remplacer le texte par des images ...

  • @abdoulayeyerodiallo73
    @abdoulayeyerodiallo73 Рік тому

    Super

  • @brunoroullier6989
    @brunoroullier6989 2 роки тому

    Merci pour ta vidéo. J'ai voulu mettre des images et je n'y suis pas arrivé snifff. Si tu pouvais en faire une vidéo complémentaire ca serait cool. Merci

    • @EcoleduWeb
      @EcoleduWeb  2 роки тому +5

      Salut, il suffit de remplacer les paragraphes par des images qui prennent 100% de la hauteur + largeur + object-fit:cover

  • @el_maroquino1476
    @el_maroquino1476 2 роки тому

    Dommage que ce ne soit pas un code qui s'adapte automatiquement au nombre d'éléments qu'il faut slider

    • @EcoleduWeb
      @EcoleduWeb  2 роки тому +1

      Yep, dans ce cas-là il faut ajuster les calculs, mais c'est déjà sympa pour du pur CSS.

  • @sandrine6466
    @sandrine6466 Рік тому

    Salut @ledesignerduweb comment fais tu si tu veux rajouter du texte sur une slide ?