Un Slider responsive avec HTML, CSS et JAVASCRIPT (Projet pour débutants ! )
HTML-код
- Опубликовано: 9 июл 2024
- Dans cette vidéo, nous allons créer un Slider Responsive (Projet complet) avec les langages HTML, CSS et JAVASCRIPT. Vous verrez que l'objectif principal est de gérer l'étape du Slider, c'est à dire quelle image on va afficher à quel moment.
-------------------------------------------------------------------------
🌍 Communauté & soutien :
- Rejoignez mon Discord (plein de bonus !) : / discord
- Soutenez-moi sur Patreon : / benbk
- Soutenez-moi avec un don en cryptos sur mon adresse Ethereum : 0x06fCEd3C170534fB5304724Df4aE0E3C5Ad2e111
⏱️ Chapitres :
0:00 : Introduction
0:16 : Résultat
0:42 : Structure du projet
1:26 : HTML
4:29 : CSS
6:38 : JAVASCRIPT
🔎 Le fichier descriptif de l'algorithme :
github.com/BenBktech/Slider-d...
🔎 Les liens cdn pour intégrer les librairies :
Font Awesome : cdnjs.com/libraries/font-awesome
🔎 L'ensemble des images et des fichiers est disponible ici :
github.com/BenBktech/Slider-d...
Crédits images :
unsplash.com/photos/mawU2PoJWfU
unsplash.com/photos/v4e3JI7DDHI
unsplash.com/photos/01_igFr7hd4
🤵 Je suis Ben BK, formateur en développement front-end, back-end et blockchain. Mon objectif ? Vous aider à devenir des développeurs Blockchain !
💭 Mes réseaux / Mon site :
Twitter : / benbktech
Twitch : / benbktech
Tiktok : / imbenbk
Site Web : benbk.io/
Instagram pro avec des infos exclusives : / benbktech
Instagram perso : / imbenbk
#slider #animé #responsive #html #css #javascript #suivant #précédent #bootstrap #débutant #simple #tuto #cours #complet #algorithme #js #projet #complet
N'hésitez pas à essayer de réaliser le slider de votre côté grâce au pdf fourni en description 🤗 good luck !
Waouuh 🎉🎉🎉
MERCI ! Meilleur tuto, bien expliqué, le PDF est génial. Si t'as d'autres pdf => d'autres tutos😁
Merci à toi, c'est long à réaliser mais why not aha !
Merci beaucoup pour ce tutoriel simple mais très instructif. Je crois que c'est la première fois que je réussis un slider avec un tuto sur RUclips. Thank's !!!
Super !
Tout est bien détaillé et clair, merci !!!
Clair et bien détaillé. Merci.
Si je pouvais m'abonner 100x je l'aurai fait, tu expliques vraiment d'une façon claire.
Merci , c'est très bien détaillé
Merci beaucoup pour tex explications claires et limpides, c'est cool !
Merci à toi 🙏
Au top
Merci pour cette super vidéo très bien expliquée
Merci à toi !
Je viens de découvrir la vidéo trés intéressante et concise,
merci !
Très bonne remarque d'un viewer, pour améliorer ce script et éviter les répétitions de code, n'hésitez pas à créer une fonction suivant() que vous mettrez dans l'event listener au clic sur "suivant" ainsi que dans le "setInterval" :)
Mercie vraiment tu explique bien j'ai aimé
Merci à toi 😊
Thank you so much bro
Hello Ben, au top tes vidéos :)
C'est chouette ce que tu fait.
Petit tweak pour éviter du code dupliqué : créer une fonction suivant() avec le code contenu dans ta fonction anonyme de ton addEventListener et l'ajouter en appel sur le addEventListener et dans le setInterval :)
Merci Jérémie, ça date ! J'ai appris que tu es rentré d'ailleurs, faudrait se capter un jour si ça te dit :) Exact, d'ailleurs j'y ai pensé plusieurs fois en le faisant, my bad , en plus c'est un peu la base de la programmation de ne pas se répéter ! Point à prendre en compte pour les prochaines vidéos :)
Thanks you!
Thank you !
merci
Salut l'ami ! Bon tuto bien précis néanmoins si je peux te recommander quelque chose c'est de ne pas utiliser des "let" à tout bout de champ. Seul les éléments qui sont susceptibles de changer de valeur durant l'exécution de ton script prennent un "let" sinon tu dois mettre "const" à ta variable. Disons que c'est plus approprié .
Hello ! En effet tu as tout à fait raison, merci pour ce message bienveillant ! ❤️
@@BenBK Je t'en prie frero ! :)
@@BenBK Et ensuite il vaut mieux éviter de mettre des underscore dans la définition de tes variables. Par exemple si tu déclares ta variable img__slider il vaut mieux mettre imgSlider. C'est la syntaxe la plus recommandée pour éviter tout problèmes
@@BenBK Mais sinon super tuto car j'ai jamais vraiment bien compris la logique des sliders et tu l'expliques assez bien je dois dire
Bonjour et merci pour cette vidéo très clair... Surtout pour une personne comme moi qui n'ai pas de formation informatique et qui essaie de mettre les mains dans le cambouis...
Du coup je rejoins ton groupe sur discord car j'aurai sans doute des questions à poser.
Encore bravo ...
Avec plaisir 🙏🙏🙏
Salut à toi !
Déjà un grand merci pour tes vidéos qui m'aide grandement dans mon apprentissage et dans ma compréhension!
Je me demandais s'il était possible de combiner ce qu'on apprend dans cette vidéo avec celle de ta vidéo sur le menu responsive.
Cordialement
Hello, oui bien entendu !
@@BenBKMerci de ta réponse!
J'ai bien essayé hier pendant 2/3 heures sans réussir, aurait tu un lien me permettant de comprendre ce comment procéder ?
@@alexandremichel3304 Uhm non malheureusement je n'ai pas fait de tuto sur les 2 en même temps
super tuto, merci bcp
j'aimerais savoir en complétement si il est possible de réduire la vitesse des slides ?
Est-il possible de rajouter du text à l'avant des images ?
merci par avance et encore merci
Yep pour la vitesse des slides change juste la valeur dans le setinterval. Pour le texte il faudra faire un text avec un position absolute et gérer le positionnement
Top vidéo j ai besoin d aide je comprend pas pourquoi je peux pas styler les i prec et suivant
Super vidéo j'ai un petit problème quand j'arrive sur mon site j'ai bien ma première photo mes au premier click plus rien
Salut, j'aimerai avoir un paragraphe de texte selon chaque image du slider, tu aurais une idée afin d'implémenter ce petit plus ? Merci !
Hello, difficile à expliquer comme ça mais tu peux rajouter un paragraphe pour chaque image, mettre les deux dans une div et faire slider la div et pas que l'img
@@BenBK Merci !
Salut Ben, merci pour cette vidéo.
Est-ce que je pourrais savoir par hasard quel est le modèle de ton clavier stp ? :)
Merci
Hey, c'est un ordinateur portable
Bien expliqué merci . Je ne vois pas où vais je trouver le PDF . Quelqu'un peut m'aider svp
Hello et merci ! Dans la description de la vidéo 😃🙏
Bonjour le slider c'est limage de font dans un site ?
Non, c'est plutôt une suite d'images qu'on peut parcourir :)
@@BenBK ok merci pour l'explication
@@gobajoseph5064 Après, tu peux aussi mettre un slider en image de fond, plusieurs images défileraient en fond ;)
Super vidéo, très facile a comprendre ! Pour ce qui est du responsive, le slider l’est, mais les images ne le sont pas, comment faire ?
Hello, Si le slider l'est, alors les images aussi ☺️
@@BenBK Merci, je pense que j’ai trouver la solution pour mon problème, dans .slider img {} j’ai mis contain à objectif-fit et ça fait ce que je cherchais. Encore merci.
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 ? 😅 car du coup je ne peut pas accéder à une image en particulier pour la mettre dans une div (tout est recupéré en requête SQL 😅)
Tout dépend du langage serveur que tu utilises. PHP ? Python ? NodeJS ? il y en a plein
Très bonne vidéo, ceci dit j'arrive pas à faire déplacer mes images . Quand j'appuie sur les flèches rien ne se passe...je comprends pas trop. Un coup de pouce ? merci ;)
Pourquoi ça ne couvre pas toute la page ?
C'est un choix 🤪
Super ! explications claires ! pour moi tout à fonctionné... jusqu'à ce que je souhaite faire slider des div au lieu d'images, et là c'est la ca ca ta trophe !
au lieu de faire
j'ai fait
en ne changeant rien sur le code css et js
et ca ne fonctionne pas; je ne sais pas pourquoi ? un indice ? merci ;-)
super tuto merci , j'ai eu un soucis pour les flèches elles n'étaient pas vraiment au centre donc j'ai fait comme ça :
.left, .right {
color: red;
font-size: 3rem;
position: absolute;
top: calc(50% - 1.5rem);
}
Hello merci à toi, cependant avec ce que j'ai écris elles sont exactement au centre ^^
@@BenBK oui ça doit venir de moi j'ai du rater une étape 😅🤦🏽♂️ je vais le refaire , merci encore
Salut mes suivant et précédent ne veulent pas ce mettre au dessus de mes image :/
regarde les infos de cette vidéo sur le z-index, ça vient de là. ;) bon courage ! :)
@@BenBK Déjà essayer avec le z-index et ça ne marche pas :/
@@BenBK La différence que j'ai avec toi c'est que mon .slider je lui donne une height de 400px et je lui donne un width de 800px
Grave agréable à suivre ! Tout fonctionne pour ma part sauf quand j'arrive sur ma page la premiere image n'apparait pas, impossible de comprendre pq pour le moment 🧐
Étrange, tu as bien mis 0 au niveau de l'index de l'image dans larray ?