Créer un beau Carrousel vertical
Par Malik • 27 July 2024
Dans cet article, nous allons explorer comment créer un carrousel vertical en HTML, CSS et JavaScript. Ce carrousel permet de faire défiler des images et du texte associés verticalement, avec des boutons pour naviguer vers le haut et vers le bas.
HTML
Le code HTML structure la page et intègre les différents éléments nécessaires au carrousel :
N'oublions pas la ligne
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/><i><i/>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
<link rel="stylesheet" href="styles.css" />
<title>Carousel vertical</title>
</head>
<body>
<div class="carousel-container">
<div class="text-slide">
<div style="background-color: #233451">
<h1>Meteore</h1>
<p>Your name</p>
</div>
<div style="background-color: #000001">
<h1>Gojo Satoru</h1>
<p>Jujutsu Kaisen</p>
</div>
<div style="background-color: #131d2f">
<h1>Sasuke Uchiwa</h1>
<p>Naruto Shippuden</p>
</div>
<div style="background-color: #ff881a">
<h1>Rengoku</h1>
<p>Demon slayer</p>
</div>
<div style="background-color: #040b09">
<h1>Deku</h1>
<p>My Hero Academy</p>
</div>
</div>
<div class="image-slide">
<div style="background-image: url(img/deku.png)"></div>
<div style="background-image: url(img/rengoku.png)"></div>
<div style="background-image: url(img/sasuke.jpg)"></div>
<div style="background-image: url(img/gojo.png)"></div>
<div style="background-image: url(img/your-name.png)"></div>
</div>
<div class="buttons-action">
<button class="button-up"><i class="fas fa-arrow-up"></i></button>
<button class="button-down"><i class="fas fa-arrow-down"></button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Explication du Code HTML
Balises de Base
Les balises <!DOCTYPE html>, <html>,
<head>, <body> et <meta>
sont utilisées pour structurer la page HTML et définir les métadonnées.
Liens de Style et Scripts
Le lien vers Font Awesome pour les icônes et le lien vers notre fichier CSS
styles.css sont inclus dans la section <head>.
Conteneur du Carrousel
La div avec la classe carousel-container contient tout le carrousel.
Text Slides
La div avec la classe text-slide contient plusieurs divs,
chacune avec un titre <h1> et un paragraphe <p>,
représentant le texte associé à chaque image.
Image Slides
La div avec la classe image-slide contient plusieurs divs
avec l'attribut background-image pour afficher les images correspondantes.
Boutons de Navigation
Les boutons button-up et button-down permettent de naviguer entre les slides.
CSS
Le code CSS est utilisé pour styliser le carrousel, définir les positions des éléments, et ajouter des transitions pour les effets de défilement :
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
height: 100vh;
font-family: "Eras ITC", sans-serif;
}
.carousel-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.text-slide {
position: absolute;
width: 35%;
height: 100%;
top: 0;
left: 0;
}
.text-slide > div {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
}
.text-slide h1 {
font-size: 40px;
margin-bottom: 15px;
}
.text-slide p {
font-size: 20px;
}
.image-slide {
height: 100%;
position: absolute;
top: 0;
left: 35%;
width: 65%;
}
.image-slide > div {
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
}
.buttons-action button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
color: #7a9687;
background-color: #f3f3f3;
border: none;
border-radius: 5px;
padding: 10px;
cursor: pointer;
}
.button-up {
transform: translateY(-50%);
}
.button-down {
transform: translateY(50%);
}
Explication du Code CSS
Styles Généraux
Les styles généraux définissent la police, les marges, les remplissages, et l'affichage du carrousel dans la fenêtre du navigateur.
Conteneur du Carrousel
La carousel-container occupe toute la largeur et la hauteur de la fenêtre
du navigateur, avec le contenu défilant en utilisant les propriétés overflow
et position.
Text Slides
Les styles appliqués à la div avec la classe text-slide
assurent que le texte est centré verticalement et horizontalement.
Image Slides
Les images sont définies comme arrière-plan et ajustées pour remplir le conteneur sans répétition.
Boutons de Navigation
Les boutons sont positionnés pour permettre la navigation entre les slides.
JavaScript
Le code JavaScript est utilisé pour gérer le défilement des slides en réponse aux interactions de l'utilisateur :
const textSlides = document.querySelector('.text-slide');
const imageSlides = document.querySelector('.image-slide');
const buttonUp = document.querySelector('.button-up');
const buttonDown = document.querySelector('.button-down');
let index = 0;
function updateSlides() {
textSlides.style.transform = `translateY(-${index * 100}%)`;
imageSlides.style.transform = `translateY(-${index * 100}%)`;
}
buttonUp.addEventListener('click', () => {
index = (index > 0) ? index - 1 : textSlides.children.length - 1;
updateSlides();
});
buttonDown.addEventListener('click', () => {
index = (index < textSlides.children.length - 1) ? index + 1 : 0;
updateSlides();
});
Explication du Code JavaScript
Variables et Sélecteurs
Les variables sont définies pour sélectionner les éléments HTML pertinents, et l'index est utilisé pour suivre la position actuelle du carrousel.
Mise à Jour des Slides
La fonction updateSlides met à jour la position des slides
en fonction de l'index courant.
Gestion des Événements
Les écouteurs d'événements sont ajoutés aux boutons pour changer l'index
et appeler la fonction updateSlides lorsque les boutons sont cliqués.
Conclusion
Le carrousel vertical est un excellent ajout à tout site web qui souhaite afficher du contenu de manière dynamique et engageante. Grâce à l'intégration de HTML, CSS, et JavaScript, vous pouvez créer un carrousel qui offre une expérience utilisateur fluide et visuellement attrayante.
En utilisant les techniques présentées dans cet article, vous pouvez facilement personnaliser le carrousel pour qu'il s'adapte à votre design spécifique, qu'il s'agisse d'ajuster les couleurs, les tailles ou les animations. N'hésitez pas à expérimenter avec différents styles et transitions pour créer un carrousel unique qui répond à vos besoins.
Pour aller plus loin, vous pourriez explorer l'ajout de fonctionnalités supplémentaires comme des indicateurs de diapositive ou des animations plus complexes. La flexibilité du carrousel vertical vous permet de l'adapter à une variété d'applications, que ce soit pour des galeries d'images, des témoignages ou des présentations de produits.Petit défis... à vous de gerer le mode responsive ! Pour la Demo, veuillez tourner votre téléphone
Suivez-moi
Conception de site vitrine personnalisé
Concevez un site web moderne qui attire et engage vos visiteurs dès la première vue.
Obtenez votre devis personnalisé