Créer un SLIDER pour votre site en CSS
HTML-код
- Опубликовано: 19 окт 2016
- Tu as encore accès à tout mon programme Hardcoders : hc.rs/programme
Gagner sa vie grâce au code.
Créer un SLIDER pour votre site en CSS
Je vous montre comment créer un SLIDER uniquement en CSS pour afficher des images sur votre site.
***
Les fichiers du tuto :
anthonywelc.com/tribu
***
🔥 QUI SUIS-JE ? 🔥
Après avoir totalement changé d'orientation pro je me suis inscrit au FreeCodeCamp.
Je veux devenir webdeveloppeur indépendant.
Pour ça je passe mes journées à apprendre à coder.
💻 LA CHAÎNE 💻
J'ai décidé de partager avec toi tout ce que j'apprends via des vidéos quotidiennes.
Tu peux suivre mon évolution et surtout apprendre plein de choses et éviter les pièges dans lesquels je suis tombés.
Je veux profondément créer ce qu'il y a de mieux pour toi comme pour moi.
👾 Abonne-toi pour passer un bout de chemin avec moi !
bit.ly/1MjCzNf
📮 Tu as encore le droit de devenir membre de ma TRIBU :
anthonywelc.com/tribu
☝️ Que veux-tu apprendre ensuite ?
anthonywelcmedia.wufoo.com/fo...
🎆 D'autres trucs que je ne peux pas mettre dans des vidéos :
/ anthonywelc
🎬 Plein d'autres vidéos :
/ anthonywelcmedia
✍ J'écris aussi des articles si tu aimes lire :
/ anthowelc
🐤 Si tu préfères lire 140 caractères à la fois :
/ anthowelc 
Наука
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
tes tutos sont géniaux. Merci et continue comme ça :)
Un grand merci à toi, dans la jungle du codage lorsque l'on débute, tu es un phare dans la nuit!!!
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 !!!!
Salut ! Tu explique bien c'est cool ! Merci, tu me sauve la mise ;)
vraiment merci pour déo , j'ai enfin réussi un slider , god bless you
Merci pour la clarté des explications 👍👍🏾
initié dans les langages web, tu m'apprends plein de notions essentiels pour mon futur site web ! 1 abo de plus
Excellent vidéo, ça m'a aidé énormément, MERCI !
Super vidéo tu m'as vraiment sauvé la mise continue comme ça 👌
Merci beaucoup je viens de decouvrir ta chaine et j'aime beaucoup ! Nouvel abonné de Belgique :D !
sympa la vidéo :) continues comme ça !
Excellent super tuto. Ça m'a beaucoup aidé. Merci encore !❤
salut je suis débutant dans le developpement web merci pour ta vidéo car elle m'a servi à mettre en place mon slider
3 ans après toujours d'actualité Merci pour tes connaissances
Superbe vidéos je commence le dév, je règle un soucis et sa devrais marcher niquel ^^ un abo de plus
Excellente vidéo ! Cela donne envie d'aller plus loin. Bonne pédagogie- Merci.
Absolument génial! Merci beaucoup.
Un grand merci pour ce tuto qui me sauve la vie!
simple ,bien expliqué , merci j'ai reussi une fois
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.
Même si la vidéo date, la méthode fonctionne parfaitement et est très propre, bien vu chef
Tres bonne video merci pour le coup d'pouce
video très utile ! merci beaucoup
merci beaucoup , jolie tuto bien détailles niquel
merci pour ce slider expliquer en pratique .
Merci champion grâce à toi j'arrive à faire un slide
Merci mille fois ! 😍
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 !:)
merci mais ca ne viens toujours pas je ne comprends pas
tres cool1 et merci pour votre temps ca m aide beaucoup
Je sais que cette vidéo elle date mais mille fois merci !!!!!
ça a marcher pour moi merci bcp pour ce tuto
merci pour t'es video ca m'aide grave
je suis archi-débutante c'est clair et merci :)
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
Merci pour ton aide !!!
merci pour l'aide car en vérité j'étais planté
tres bonne video et merci!!!!
Salut !
Très bonne vidéo, du coup est-il possible d'ajouter des calls-to-actions différents sur chaque images ?
Excellente vidéo !!!!! j'adore continue
Bravo mon pote.. vous trop fort
Tu expliques très bien :O
Super vidéo !
trop cool ta video thx
Top vidéo très claire
je vous remercie beaucoup grace a vous on aura 12 à notre projet de php aligato
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
vraimment super et bien expliquer
Mercii j'aime bien !
Super tuto merci
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.
Merci pour le tuto. C'est possible de rajouter des photos et de redimentionner le slider pour le rendre plus grand?
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 ^^
Géniale Merciii
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
Merci beaucoup Usul master 3615! Non sérieux c'est cool.
merci beaucoup !
Merci pour ce Tito, c'est le moins qu'on puisse dire
Très pédagogique ; très utile ; très beau gosse.
Très bonne vidéo
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 ?
Merci bien ,j'ai réussi à monter un slider splendide
MERCI BEAUCOUP
Merci beaucoup
merci bcp c es trop bien
es ce ke que c es possible d ajoute des dessus?
merci++ je veux le mettre pour les photo de la base de donné svp
Super vidéo
Merci 😊
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?
trop bg poto
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 ? 😅
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
Bonjour , j'ai une question comment peut on creer un fichier SRC sur notepad ++
Ne fonctionne pas la propriété css animation 5sec non reconnue par codium ou vs code
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
comment je veux créer le slider avec éditeur notpad
Trés bonne vidéo, mais comment on met ce slider en fond d'écran de son site ?
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?
tu met ton slider dans une div avec un weight à 100%
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!!!!
En mettant une 4ème image identique à la première
Hey, j'ai une question est-ce qu'il est responsive ?
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
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
Mon slider ne s'exécute pas et pourtant j'ai tout bien fait et reverifier plusieurs fois mais rien help svp
sympa, meci ;)
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 ?
je slide que sur 2 image la 3eme image ne passe pas dans le slide
Sympa!
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)
je crois que c'est impossible en HTML5 et CSS3 . il faut utiliser le JavaScript !
@Modeuil MW merci bg
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 ?
comment faire pour que les slides occupent tout l'ecran?
super bro
Je n'ai pas trouvé les fichiers du tuto ... ils sont où ?
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.
comment faire pour telecharger ce code svp???
comment faire un slider a 4 div ???
Le css dans le html ??
Merci
En css ont peut le faire mais pour ma part je trouve que en Java Script, s'est plus fluide
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
Bonjour, je n'arrive pas avec le "glisse"