Astuce #19: Créer un carrousel avec Javascript et CSS
HTML-код
- Опубликовано: 18 окт 2021
- Un carrousel (ou défilement en carrousel) est un effet très prisé sur les site Web. Dans cette vidéo, nous allons voir comment créer un carrousel avec Javascript et CSS. La plupart des développeurs intègrent un carrousel dans la page d'accueil afin de donner une idée au visiteur sur le contenu disponible sur le site Web. Un carrousel sert à faire défiler des images comme une sorte d'album photo, à exposer des annonces ou des titres qui pourraient intéresser le visiteur.
Наука
Pour plus de cours, rendez-vous sur chiny.me
On peut pas s'ennuyer avec un mentor tel que vous,
merci encore grand prof et bon courage..
De rien Mohamadou. Merci pour votre commentaire. J'apprécie beaucoup :)
Excellent tuto très bien expliqué 😊 👍👍👍👍👍👍
Merci pour votre compliment :)
Jolie astuce 👍. Simple et facile à comprendre
Merci pour votre commentaire :)
Merci pour cette vidéo. Elle est très instructive
De rien. Je suis content que la vidéo vous ait plu. Merci pour votre commentaire :)
Merci énormément pour ce tuto ;)
De rien Didier. Merci pour votre commentaire :)
je tenais a te remercier pour ce tuto clair que j'ai suivi jusqu'au bout 👍👍
De rien Mikael. Merci pour votre commentaire :)
Excellent merci !
De rien. Merci à vous :)
Merci pour le tuto :)
De rien. Merci pour votre commentaire :)
Bonjour, où avez-vous trouvé les flèches ? Merci :)
Bonsoir. Y a plein de sources pour ça, les plus recommandées sont les sites qui proposent des images libres de droit, comme flaticon, freepng... Pour les grandes images JPEG je vous recommande Pixabay. Il en existe plein d'autres mais ce sont ceux que j'utilise le plus. Bonne chance :)
pour faire un sorte que si on atteint une extremité on puisse toujours appuyer sur le bouton et que le carroussel reboucle a l'infini, comment on peut faire ?
Il suffit de dupliquer les containers autant de fois que nécessaire. De préférence de manière dynamique à l'aide de méthodes Javascript comme document.createElement() et object.appendChild()...
Bonjour, perso, en travaillant avec Jquery, j'ai fait ça (si tu clique a droite, alors que tu est sur la dernière photo, tu revient au début, même principe pour la flèche gauche) :
$(document).ready(function() {
var nbr = 5;
var p = 0;
var container = $('#container');
var g = $('#g');
var d = $('#d');
container.css('width', (800 * nbr) + "px");
for (var i = 1; i
Bonjour, merci pour ce tuto super bien expliqué, je voulais savoir est il possible de faire en sorte que les images du carrousel défilent automatiquement
Bonsoir. De rien. Je suis content que la vidéo vous ait plu.
Oui bien sûr, il suffit que vous remplaciez g.onclick (ou d.onclick) par setInterval() ou setTimeout() qui permet d'inclure une temporisation et relancer la fonction automatiquement.
Je vous recommande cette vidéo qui pourrait vous aider à comprendre le principe de la temporisation: ruclips.net/video/VO8nZrqDDwM/видео.html
Merci pour votre commentaire :)
👍👍👍👍👍Bonjour et super bravo pour ce tutoriel très bien expliqué. J’ai regardé plusieurs fois la vidéo et recopier correctement les codes pour les 2 fichiers nécessaires, le html et le CSS ,mais mon carrousel hélas ne fonctionne pas🤥🤥. Si je vous envoie les 2 fichiers, pourriez-vous svp me dire où se situe mon erreur !! D’avance merci et bravo pour vos cours..
De rien.
Voilà le code HTML:
Carrousel
document.body.onload=function(){
nbr=5;
p=0;
container=document.getElementById("container");
g=document.getElementById("g");
d=document.getElementById("d");
container.style.width=(800*nbr)+"px";
for(i=1;i-nbr+1)
p--;
container.style.transform="translate("+p*800+"px)";
container.style.transition="all 0.5s ease";
afficherMasquer();
}
d.onclick=function(){
if(p
Et voilà le CSS:
body{
margin:0;
display:flex;
align-items: center;
justify-content: center;
min-height:100vh;
background-image:url("../images/back.jpg");
background-size:cover;
}
#carrousel{
width:800px;
height:400px;
border:solid 4px #FFF;
box-shadow:0 0 14px rgba(0,0,0,0.3);
position:relative;
overflow:hidden;
}
#container{
width:800px;
height:400px;
}
.photo{
width:800px;
height:400px;
margin:0;
display:inline-block;
background-size:cover;
}
.bouton{
position:absolute;
width:70px;
cursor:pointer;
top:150px;
}
#g{
left:0;
opacity:0.4;
transform:rotate(0deg);
transition:all 0.3s ease;
}
#d{
right:0;
opacity:0.4;
transform:rotate(180deg);
transition:all 0.3s ease;
}
#g:hover{
transform:rotate(0deg) scale(1.1);
opacity:1;
transition:all 0.3s ease;
}
#d:hover{
transform:rotate(180deg) scale(1.1);
opacity:1;
transition:all 0.3s ease;
}
@@MohamedChiny Bonjour Mohamed,
Vraiment trop trop super, un grand merci pour votre réponse très rapide que je n’attendais pas avec autant de réactivité. J’ai donc pu recopier correctement les 2 codes que je compare aux miens depuis 6h ce matin et en examinant en détail toute la syntaxe (guillemets, virgules, parenthèses, etc. etc.) et pour l’instant je ne trouve pas mon erreur, mais peu importe car avec votre corrigé le slider fonctionne correctement. J’ai visionné plusieurs fois votre tuto et réalisé plusieurs copies d’écran avec Photoshop afin de recopier correctement la syntaxe. Ce tuto me servira beaucoup car j’en trouve peu sur le web qui fonctionne à part ceux trouvés sur W3Schools. Pour info, j’ai déjà crée 2 sites, le premier il y a une douzaine d’années avec Dreamweaver www.in-concept.fr/,
Et un second il y a 3 ans avec les syntaxes html, css, et js fcaclub34.fr/.
Je travaille essentiellement les cours avec les tutos trouvés sur internet et je vais essayer d’améliorer mon site de funboard…..
Encore merci, merci beaucoup et à bientôt peut être .
Georges Clerget ecolo34@hotmail.fr
👍👍👍👍👍👍👍
S'il vous plaît j'aimerai savoir comment faire pour trouver le bouton du carrousel
Il s'agit d'une image. Il existe plein de sites qui offrent des images et icônes gratuites, comme sur ce lien: www.flaticon.com/fr/icones-gratuites/la-fleche
Bonne chance :)
Bonjour. J'aimerais tester quelques choses avec un carousel. J'aimerais a la place des images, mettre des pages html(ou php), et faire en sorte que ça me donne un aperçu, en gros de la page. Donc un carousel avec des pages html ou php à la place d'images.
Est-ce faisable ?
Merci d'avance
Oui bien sûr que c'est faisable, d'ailleurs je l'ai mentionné dans la vidéo. Ce sont des div qui sont animées, donc vous pourrez y mettre n'importe quel contenu (images, vidéos, textes, ou tout ça à la fois).
Salut. J'aimerais savoir comment tu as renommé tes images
Salut. J'ai utilisé les nom "im1.jpg", "im2.jpg"... Sinon renommez vos images comme vous voulez, et mettez leurs chemin dans un tableau Javascript et utilisez les indices du tableau pour y accéder.
Bonne chance :)
Bonjour ! Supervideo, j'aimerais faire un effet infini sur mes photos, une fois arrivé a la derniere j'aimerais qu il revienne a la premiere, est ce possible avec cette methode de carrousel?
Merci d'avance pour la réponse
Bonjour. Oui bien sûr, tout est possible. Il faudra retoucher le code un peu et vous obtiendrez tous les effets que vous souhaitez.
Merci pour votre commentaire :)
un indice sur les commandes a realiser? :)
@@MohamedChiny
@@fredp9187 Vous pouvez par exemple créer une div supplémentaire à chaque fois que vous vous rapprochez de la dernière image. Dans cette div, vous intégrez la première image et ainsi de suite. On aura donc l'impression que l'album refait un tour, alors qu'en fait il continue dans un même sens, mais les images se répètent à chaque fois il y a un besoin.
merci
De rien. Merci pour votre commentaire :)
bonjour comment pourrais je faire si je veux ajouter via js uniquement des bullets dot liés au images lorsque celle ci défile svp? merci
Bonsoir.
Moi j'aurais pensé à des containers HTML (div ou autres) positionnés en absolute et qui seront ensuite placés là où vous souhaitez sur l'image.
Sinon, une solution classique consiste à utiliser la balise pour une image.
Bonne chance :)
@@MohamedChiny merci je vais essayer
@@elfisanguine1407 De rien :)
Salut, ton tuto marche bien sauf que mon image ne rentre pas dans le cadre, serais tu comment la redimensionner ?
Salut. Il s'agit d'une image d'arrière plan. Donc elle rentre dans le cadre dans tous les cas, mais elle pourrait être tronquée, alors vous appliquez le style background-size:cover pour en afficher le maximum. Vous pouvez mettre pause sur le CSS pour voir le style statique, sinon, y a aussi du style qui a été appliqué dans la partie Javascript. Bonne chance :)
@@MohamedChiny Merci ! Je vais essayer
bonjour j’ai besoin daide malgré avoir suivi le tuto aucune de mes images s’affiche, adresse des images correctes, la partie js ne sest pas mise en couleur partout comme vous, pouvez vous maidez? merci d’avance
Voilà le code HTML:
Carrousel
document.body.onload=function(){
nbr=5;
p=0;
container=document.getElementById("container");
g=document.getElementById("g");
d=document.getElementById("d");
container.style.width=(800*nbr)+"px";
for(i=1;i-nbr+1)
p--;
container.style.transform="translate("+p*800+"px)";
container.style.transition="all 0.5s ease";
afficherMasquer();
}
d.onclick=function(){
if(p
Le CSS:
body{
margin:0;
display:flex;
align-items: center;
justify-content: center;
min-height:100vh;
background-image:url("../images/back.jpg");
background-size:cover;
}
#carrousel{
width:800px;
height:400px;
border:solid 4px #FFF;
box-shadow:0 0 14px rgba(0,0,0,0.3);
position:relative;
overflow:hidden;
}
#container{
width:800px;
height:400px;
}
.photo{
width:800px;
height:400px;
margin:0;
display:inline-block;
background-size:cover;
}
.bouton{
position:absolute;
width:70px;
cursor:pointer;
top:150px;
}
#g{
left:0;
opacity:0.4;
transform:rotate(0deg);
transition:all 0.3s ease;
}
#d{
right:0;
opacity:0.4;
transform:rotate(180deg);
transition:all 0.3s ease;
}
#g:hover{
transform:rotate(0deg) scale(1.1);
opacity:1;
transition:all 0.3s ease;
}
#d:hover{
transform:rotate(180deg) scale(1.1);
opacity:1;
transition:all 0.3s ease;
}
Quant-aux images, elles doivent être placées dans le dossier "images" qui figure au même emplacement que le HTML, pareil pour le dossier "css".
Bonne chance :)
@@MohamedChiny c’est justement le cas
@@matheobuseniers6893 Vous avez vu les codes que je vous ai envoyé en réponse de votre commentaire?
bonjour. J'ai un problème avec l'importation d'images, j'ai beau mettre le bon itinéraire des images rien ne s'affiche, comment faire ?
Bonsoir. Essayez de suivre la même configuration de dossiers que j'ai utilisée dans la vidéo pour que tout fonctionne bien. Quand ça sera le cas, vous pourrez modifier cette configuration en partant sur une bonne base. En gros:
- Créez deux dossiers à la racine de votre projet, ces dossiers sont /images et /css (la racine veut dire là où vous avez mis votre fichier html).
- Dans le dossier /images vous placez toutes vos images et dans /css vos styles css
- pour insérer une image dans le html, le chemin sera src="images/nom_de_l_image.extension". Pour accédez à cette même image depuis le css en tant qu'arrière plan, le chemin devient: background-image: url("../images/nom_de_l_image.extension").
Courage :)
It took time before you do it 😅
J'essaie de mettre en ligne du nouveau quand j'en ai l'occasion. Merci Wonder :)