Créer un SLIDER pour votre site en CSS

Поделиться
HTML-код
  • Опубликовано: 17 окт 2024

Комментарии • 158

  • @Baal93Ash
    @Baal93Ash 4 года назад +14

    Excellent tuto clair simple efficace si je devais ajouter une suggestion ca aurai été cool de montrer aussi pour les slide "Non auto" genre controlable avec des fleches

  • @tech-info69
    @tech-info69 7 лет назад +8

    Raccourci: .slider>.slides>.slide*3...:
    Dans votre éditeur, exécutez la commande "Package Control" en tapant "ctrl+shift+P" puis sélectionner " Install Package", Puis recherchez et installez "Emmet".
    Redémarrez l'éditeur (si nécessaire).
    Mettez un pouce bleu si c'est ok !:)

  • @celinelhoir4854
    @celinelhoir4854 4 года назад +1

    Un grand merci à toi, dans la jungle du codage lorsque l'on débute, tu es un phare dans la nuit!!!

  • @lailaabayalifestyle33
    @lailaabayalifestyle33 4 года назад +1

    3 ans après toujours d'actualité Merci pour tes connaissances

  • @darksmix8932
    @darksmix8932 3 года назад +1

    initié dans les langages web, tu m'apprends plein de notions essentiels pour mon futur site web ! 1 abo de plus

  • @thibauddebarnot6702
    @thibauddebarnot6702 Год назад

    Même si la vidéo date, la méthode fonctionne parfaitement et est très propre, bien vu chef

  • @Zazeal-Design
    @Zazeal-Design 4 года назад

    je cherchais a le faire tout la journé j'avais finis par me rabattre sur un code que je ne connais pas avec du JS et du jQuery demain je teste ta façon Comme quoi trainer sur youtube jusqu'a pas d'heure ça a du bon !! :D merci

  • @akoumianmetuschtresor1907
    @akoumianmetuschtresor1907 7 лет назад

    Bonsoir learder ici un Ivoirien codeur et pour bas e Réseau informatique. Chapeau, très belle vidéo et parfait cour. Je vous suis du coût vous resterez mon teacher.

  • @sebagameur9065
    @sebagameur9065 5 лет назад +2

    Bonjour, ton slider est génial mais j'ai un soucis avec le responsive, les images ne s'adapte pas à la taille de l'écran. Est ce que tu pourrais éventuellement refaire une vidéo la dessus ?

  • @pierrot1255
    @pierrot1255 3 года назад

    Un grand merci pour ce tuto qui me sauve la vie!

  • @kafandoamadou6586
    @kafandoamadou6586 Год назад

    Excellent super tuto. Ça m'a beaucoup aidé. Merci encore !❤

  • @momobamba4079
    @momobamba4079 5 лет назад +6

    vraiment merci pour déo , j'ai enfin réussi un slider , god bless you

  • @xXxFistOfDeathxXx
    @xXxFistOfDeathxXx 7 лет назад +2

    tes tutos sont géniaux. Merci et continue comme ça :)

  • @marykywette3746
    @marykywette3746 7 лет назад

    Bonjour,
    Je viens de découvrir ta page en m'arrachant les cheveux pour un projet.
    Je crois que tu viens de gagner une abonnée, c'est super bien expliqué . Bref bravo et merci !!!!

  • @bonsoir1978
    @bonsoir1978 3 года назад

    Bonjour, j'ai un petit soucis j'ai finit le code mais l'animation ne marche pas tout est bon mais les photos ne défile pas

  • @zerojanvier3864
    @zerojanvier3864 5 лет назад

    Bonjourgénial et très bien expliqué Par contre que faudrait il rajouter pour que l'image s'arrête au passage de la souris par exemple ?Merci d'avance pour la réponseCordialement

  • @hazizuadewumisunmaila7023
    @hazizuadewumisunmaila7023 5 лет назад +5

    géniale la vidéo mais comment faut il procéder pour que la première image puisse repasser par derrière au lieu de reculer pour apparaître de nouveaux.merci!!!!

    • @vivienbeaune9483
      @vivienbeaune9483 4 года назад +1

      En mettant une 4ème image identique à la première

  • @biarus5644
    @biarus5644 3 года назад

    je vous remercie beaucoup grace a vous on aura 12 à notre projet de php aligato

  • @Zazeal-Design
    @Zazeal-Design 4 года назад

    Bonsoir, je ne comprend pas comment gérer les pourcentage du Keyframes avec mon nombres d'images. J'ai beaucoup d'image a inclure dans la galerie mais je ne comprend pas comment gérer les pourcentage par rapport a ce nombre pour que les images ai le temps de faire une pause pour qu'on puisse regarder l'image. Pouvez vous m'aider ?

  • @Defense89
    @Defense89 3 года назад

    vraiment une bonne video est-ce que c'est possible de ne pas revenir a la premiere image mais loop? 1-2-3-1-2-3-1-2-3 sans voir un revenir a gauche a la 1ere?

  • @caussinalban5346
    @caussinalban5346 7 лет назад

    Bonjour , j'ai suivi votre tuto pour le slide , mais le problème c'est que quand des @Keyframes et a côté je veut écrire glisse , cela ne fonctionne pas ... possible de m'aider, j'utilise sublime text pour coder

  • @annonyme347
    @annonyme347 4 года назад +1

    Salut, je voulais savoir quand on veut travailler en % et non en px on peut réaliser ça comment ? Car le width: 100% dans .slider par exemple marche pas aussi bien que le 500px ^^

  • @mamadikanoute4350
    @mamadikanoute4350 3 года назад

    Bonjour, ou puis-je récuperer le code?
    J'ai suivi le tuto, je l'ai réalisé et cela ne fonctionne pas.
    J'aimerai comprendre d'ou vien mon erreur.
    Félicitation pour votre travail.
    Cordialement

  • @hossamel2006
    @hossamel2006 3 года назад +1

    Excellent vidéo, ça m'a aidé énormément, MERCI !

  • @fabiennenauze
    @fabiennenauze 2 года назад

    Absolument génial! Merci beaucoup.

  • @Valeme_ytb
    @Valeme_ytb 3 года назад

    salut je n'arrive pas a avoir les images les unes a coter des autres elles sont les une au dessus des autres et puis tu dis a la fin de la video que l'on peut utiliser le code en téléchargeant mais je ne le voit pas salut.

  • @dibrourodolpheganga4295
    @dibrourodolpheganga4295 7 лет назад

    salut je suis débutant dans le developpement web merci pour ta vidéo car elle m'a servi à mettre en place mon slider

  • @elsazebier1036
    @elsazebier1036 4 года назад

    trop bien j'arrive pas a faire ca , ce que j'aimerais faire c'est une bande passante pour envoyer ces dédicace avec pseudo et message en dessous de ma radio ? tu peux m'aider ?

  • @FlashbackToonsFr
    @FlashbackToonsFr 2 года назад

    Bonjour , j'ai une question comment peut on creer un fichier SRC sur notepad ++

  • @darkodeur9603
    @darkodeur9603 7 лет назад +3

    Salut super tuto, j'azi une question quand tes images doivent prendre toute la largeur du navigateur et que cela doit etre responsive tu fais comment?

    • @N..O..2
      @N..O..2 4 года назад

      tu met ton slider dans une div avec un weight à 100%

  • @henoclumbala4218
    @henoclumbala4218 3 года назад

    Merci pour ce Tito, c'est le moins qu'on puisse dire

  • @gabolitou7972
    @gabolitou7972 2 года назад

    J’ai finit de coder, après avoir vérifier si il y a pas de faute, je le lance mais il y a rien, ça mets une page blanche

  • @hassouna931
    @hassouna931 2 года назад

    Très bon tuto ^^ ! Du coup si on code en EJS via des images récupérés en BDD comment on peut faire ça sachant que les données sont récupérés via une boucle for of ? 😅

  • @yasox6644
    @yasox6644 3 года назад

    Hey, j'ai une question est-ce qu'il est responsive ?

  • @hugoplay3034
    @hugoplay3034 7 лет назад

    bonjour,
    Je crée pour la premiere fois mon site web.
    Je vien de terminer mon slidder avec ton tuto mais je ne trouve pas la maniere de faire des blocks en dessous de ce slidder
    merci de m'aider merci

  • @BrotherOfLegend
    @BrotherOfLegend 5 лет назад +1

    Superbe vidéos je commence le dév, je règle un soucis et sa devrais marcher niquel ^^ un abo de plus

  • @damien6925
    @damien6925 Год назад

    merci beaucoup , jolie tuto bien détailles niquel

  • @aurelienperrot2323
    @aurelienperrot2323 6 лет назад

    Je sais que cette vidéo elle date mais mille fois merci !!!!!

  • @mariechantalefonkoumatah5327
    @mariechantalefonkoumatah5327 3 года назад

    Super vidéo tu m'as vraiment sauvé la mise continue comme ça 👌

  • @nikitache5607
    @nikitache5607 6 лет назад

    Merci pour le tuto. C'est possible de rajouter des photos et de redimentionner le slider pour le rendre plus grand?

  • @denisdambares4568
    @denisdambares4568 4 года назад

    Je n'ai pas trouvé les fichiers du tuto ... ils sont où ?

  • @estreytshidibi1253
    @estreytshidibi1253 3 года назад

    J'essaie de tester chez moi mais ça ne marche pas , alors que j'ai recopié le code comme dans la vidéo

  • @peter-lovethomas
    @peter-lovethomas 3 года назад

    Bravo mon pote.. vous trop fort

  • @abuyahya3859
    @abuyahya3859 4 года назад

    Salut !
    Très bonne vidéo, du coup est-il possible d'ajouter des calls-to-actions différents sur chaque images ?

  • @ck8999
    @ck8999 6 лет назад

    Merci beaucoup je viens de decouvrir ta chaine et j'aime beaucoup ! Nouvel abonné de Belgique :D !

  • @mercy5119
    @mercy5119 6 лет назад +1

    Bonjour,
    Merci beaucoup pour ta vidéo qui m'a beaucoup aidé à comprendre le fonctionnement d'un slider, tu expliques très bien!
    En revanche j'aimerais savoir s'il était possible de faire une vidéo où tu expliques comment contrôler ton slider à l'aide de flèches? J'ai essayé de bidouiller quelques trucs mais le résultat n'est pas très concluant x)

    • @leblogdesmimosas3170
      @leblogdesmimosas3170 6 лет назад

      je crois que c'est impossible en HTML5 et CSS3 . il faut utiliser le JavaScript !

    • @Lebonbarnab
      @Lebonbarnab 2 года назад

      @Modeuil MW merci bg

  • @dibrourodolpheganga4295
    @dibrourodolpheganga4295 7 лет назад

    je l'ai utilisé avec des images de300px c'est passé par contre lorsque j'ai utilisé des images de 940px avec le meme code ça ne passe pas je n'arrive pas à comprendre

  • @Zygastron
    @Zygastron 6 лет назад

    Super, merci, je cherchais à faire un slider avec peu de règles, C'est génial.
    J'essaie de le faire défiler de haut en bas, mais j'ai un espace blanc de 5px, et je ne trouve pas comment le supprimer.

  • @damienmutidesgrouas9597
    @damienmutidesgrouas9597 5 лет назад

    Merci beaucoup pour le tuto ! Je souhaitais juste savoir comment tu actives l'écriture automatique de toutes les div au début de ton tuto : ".slider>.slides>slide*3>img[src="$.jpg"]" . Ca a l'air effectivement très pratique. Je suppose que tu es sous Sublime Text. Merci d'avance pour ta(vos) réponse... Dam

    • @bellaaya6184
      @bellaaya6184 3 года назад

      Juste apres avoir ecrit le le code tapez entrer

  • @nicolaslemercier719
    @nicolaslemercier719 6 лет назад

    bonjour,
    Sais-tu comment stopper la translation lorsqu'on survole une photo ?
    Peut-on utiliser la propriété hover sur la keyframes ?

  • @Alexandre-nu1qb
    @Alexandre-nu1qb 7 лет назад +2

    Salut ! Tu explique bien c'est cool ! Merci, tu me sauve la mise ;)

  • @zidaneyemeli692
    @zidaneyemeli692 4 года назад

    Jolie Tito en HD et très compréhensible. Merci pour tout même comme en reproduisent la même chose j'ai pas obtenu le résultat attendu mai je suis dis sue le problème se trouve au niveau de mon navigateur

  • @ma_verite
    @ma_verite 5 лет назад

    Mon slider ne s'exécute pas et pourtant j'ai tout bien fait et reverifier plusieurs fois mais rien help svp

  • @mohammedziani9614
    @mohammedziani9614 2 года назад

    Merci bien ,j'ai réussi à monter un slider splendide

  • @chloemoresi7420
    @chloemoresi7420 7 лет назад

    Bonjour, j'ai une petite question...
    J'ai réalisé ce slider mais je souhaite pouvoir y insérer des images sans avoir à les redimensionner toutes. J'ai des images qui sont beaucoup trop grandes, et j'aimerais qu'elles "rentrent" en conservant le ratio... Quelqu'un pourrait-il m'aider?
    Merci d'avance :)

    • @florianm22
      @florianm22 6 лет назад

      Pas d'astuce magique. Tu peux essayer width: 500px et height: auto sur les images mais ça risque de laisser des blancs dans le slider.

  • @mkn5554
    @mkn5554 4 года назад

    Merci pour la clarté des explications 👍👍🏾

  • @leblogdesmimosas3170
    @leblogdesmimosas3170 6 лет назад

    je sais que c'est hors sujet et que la vidéo date un peu, mais je voudrais savoir quel éditeur de texte tu utilise ?
    sinon vidéo geniale!!!!!
    bravo
    code simplement

    • @an_unknowuser
      @an_unknowuser 6 лет назад

      je sais que sa date mais si tu recherche toujours l'editeur sache que c'es sublime text qu'il utilise

  • @alexanvonner1729
    @alexanvonner1729 3 года назад

    merci pour t'es video ca m'aide grave

  • @leonidas-codm1313
    @leonidas-codm1313 4 года назад

    simple ,bien expliqué , merci j'ai reussi une fois

  • @lionelbetuel4459
    @lionelbetuel4459 7 лет назад

    Bonjour, comment faire pour un slider plein écran responssif les slide s'affichent du haut vers le bas
    Merci d'avance.

    • @quentindouris5007
      @quentindouris5007 7 лет назад

      changer les coordonnées mettre Y à la place de X et pour la dimension il vous faut une image assez grande en terme de pixel

  • @stephane2139
    @stephane2139 7 лет назад

    Excellente vidéo ! Cela donne envie d'aller plus loin. Bonne pédagogie- Merci.

  • @aquilon0130
    @aquilon0130 5 лет назад

    Ne fonctionne pas la propriété css animation 5sec non reconnue par codium ou vs code

  • @chealsytchasso3871
    @chealsytchasso3871 2 года назад

    comment faire pour que les slides occupent tout l'ecran?

  • @elthantan5632
    @elthantan5632 4 года назад

    Bonjour, peut-on utiliser cette technique si l'on souhaite activer l'animation "de glisse" qu'avec des boutons ?

    • @guixou
      @guixou 3 года назад

      Salut, je me pose la même question, tu a pus trouver si c'était possible ?

    • @elthantan5632
      @elthantan5632 3 года назад +1

      ​@@guixou Hello... Je ne sais plus du tout comment j'ai fait. Pour moi le mieux ce serait de préparer une animation en CSS (fade ou slide) et de l'ajouter dans dans la classe de tes images, et puis de créer une fonction en javascript qui permet de changer l'image affichée (par exemple en stockant tous les noms/chemins des images dans un tableau).
      Par exemple tu as ton tableau : array=['img1', 'img2', 'img3'];
      Tu utilises ensuite ce tableau pour afficher une image avec une variable x.
      x = 1;
      document.getElementById('imgAffichee').setAttribute("src",array[x]);
      Tu fais deux fonctions, une pour chaque bouton. La première ferait x-1, la deuxième ferait x+1.
      C'est un exemple parmi tant d'autres, il y a des dizaines de possibilités.

    • @guixou
      @guixou 3 года назад +1

      @@elthantan5632 Merci beaucoup tu m'enlève une grosse épine du pied ! j'était partie beaucoup trop loin x) merci à toi !

  • @emilienmarjorien9248
    @emilienmarjorien9248 7 лет назад

    Très pédagogique ; très utile ; très beau gosse.

  • @kouassimichelkoffi1860
    @kouassimichelkoffi1860 6 лет назад

    Merci champion grâce à toi j'arrive à faire un slide

  • @OFR5086
    @OFR5086 3 года назад

    vraimment super et bien expliquer

  • @AurelieBinet-ye8ru
    @AurelieBinet-ye8ru Год назад

    Bonjour,
    je ne trouve pas votre tuto

  • @yasox9961
    @yasox9961 4 года назад

    Bonjour, je n'arrive pas avec le "glisse"

  • @coursexercices8852
    @coursexercices8852 8 лет назад

    salut comment vous faites pour valider l'expression qui insert 3 div je veux utiliser ça
    .slider>.slides>.slide+4>a[href="#"] merci

    • @florianm22
      @florianm22 6 лет назад

      Essayez d'appuyer sur Tab.

  • @pokerjoker6997
    @pokerjoker6997 8 лет назад +1

    sympa la vidéo :) continues comme ça !

  • @ayarizina9690
    @ayarizina9690 4 года назад

    je suis archi-débutante c'est clair et merci :)

  • @pabios
    @pabios 5 лет назад

    merci pour ce slider expliquer en pratique .

  • @karabouegbon5793
    @karabouegbon5793 6 лет назад

    merci pour l'aide car en vérité j'étais planté

  • @calebeloko5323
    @calebeloko5323 2 года назад

    Top vidéo très claire

  • @williamskamga5023
    @williamskamga5023 4 года назад

    merci bcp c es trop bien
    es ce ke que c es possible d ajoute des dessus?

  • @comments1773
    @comments1773 6 лет назад +1

    Très déçue car le slider ne fonctionne pas et l'inscription au Toto débouche sur pas sur le tuto mais sur un formation payante ! 974 euros !!!!!!

  • @meriemyahiaoui5759
    @meriemyahiaoui5759 3 года назад

    Mercii j'aime bien !

  • @sabrinadermeche2334
    @sabrinadermeche2334 6 лет назад

    ça a marcher pour moi merci bcp pour ce tuto

  • @nano-geek2772
    @nano-geek2772 6 лет назад

    Trés bonne vidéo, mais comment on met ce slider en fond d'écran de son site ?

  • @philou527
    @philou527 7 лет назад

    Tu expliques très bien :O

  • @do7majeur
    @do7majeur 4 года назад +1

    En css ont peut le faire mais pour ma part je trouve que en Java Script, s'est plus fluide

  • @angelineelisabeth4253
    @angelineelisabeth4253 6 лет назад

    je slide que sur 2 image la 3eme image ne passe pas dans le slide

  • @SkyGreeD
    @SkyGreeD 6 лет назад

    on peut faire la même chose mais avec du texte ?

  • @sergeantb2359
    @sergeantb2359 6 лет назад

    merci pour la video mais pour nous les apprenants j'aimeriez que vous nous présentiez une page de site bien présenter qu'on fera ensemble merci

  • @princeawo-yiz3638
    @princeawo-yiz3638 6 лет назад

    comment faire pour telecharger ce code svp???

  • @samyyachir6897
    @samyyachir6897 7 лет назад

    Merci beaucoup Usul master 3615! Non sérieux c'est cool.

  • @Wirozz101
    @Wirozz101 4 года назад

    Super tuto merci

  • @Crocofrozen
    @Crocofrozen 7 лет назад +1

    Excellente vidéo !!!!! j'adore continue

  • @violentrenard06violent12
    @violentrenard06violent12 3 года назад

    trop bg poto

  • @freegun300
    @freegun300 3 года назад

    ça ne marche pas sur google chrome :/

  • @yves-rolanddebo7972
    @yves-rolanddebo7972 7 лет назад +2

    Tres bonne video merci pour le coup d'pouce

  • @clubmasolo5382
    @clubmasolo5382 6 лет назад

    comment je veux créer le slider avec éditeur notpad

  • @sylmiguaaboubacarouedraogo9440
    @sylmiguaaboubacarouedraogo9440 7 лет назад

    Merci pour ton aide !!!

  • @colasvancostenoble1354
    @colasvancostenoble1354 3 года назад

    merci beaucoup !

  • @stephanepascalntab9918
    @stephanepascalntab9918 5 лет назад

    video très utile ! merci beaucoup

  • @mamadoulamaranasow5010
    @mamadoulamaranasow5010 3 года назад

    MERCI BEAUCOUP

  • @samyyachir6897
    @samyyachir6897 7 лет назад +1

    Ta méritais ton pouce bleu

  • @Amstariga
    @Amstariga Год назад

    Hum ... alors en fait si, on peut mettre un CD dans une Sega megadrive avec son extension Mega CD 32x : ;)

  • @constancevilo5418
    @constancevilo5418 7 лет назад +2

    Merci mille fois ! 😍