Créer un diaporama d’images peut sembler difficile de prime abord pour un débutant. Pourtant, s’il est question d’un slider classique, le code peut se résumer à une petite centaine de lignes.
Dans cet article, nous allons voir deux exemples de slider CSS/JS, ensuite je vous présenterai quelques plugins de slider qui permettent d’aller beaucoup plus loin.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Créer un diaporama d’images en CSS uniquement
Un exemple sans JS :
<!DOCTYPE html>
<html>
<head>
<title>Custom Slider</title>
</head>
<body>
<div class="slider-container">
<div class="menu">
<label for="slide-dot-1"></label>
<label for="slide-dot-2"></label>
<label for="slide-dot-3"></label>
</div>
<input class="slide-input" id="slide-dot-1" type="radio" name="slides" checked>
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide1.jpg">
<input class="slide-input" id="slide-dot-2" type="radio" name="slides">
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide2.jpg">
<input class="slide-input" id="slide-dot-3" type="radio" name="slides">
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide3.jpg">
</div>
</body>
</html>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
img {
max-width: 100%;
}
.slider-container {
max-width: 800px;
position: relative;
margin: auto;
height: 350px;
overflow: hidden;
}
.menu {
position: absolute;
left: 0;
z-index: 11;
width: 100%;
bottom: 0;
text-align: center;
}
.menu label {
cursor: pointer;
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50px;
margin: 0 0.2em 1em;
}
.menu label:hover,.menu label:focus {
background: #1c87c9;
}
.slide-input{
opacity: 0;
}
.slide-img {
width: 100%;
height: 300px;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
transition: left 0s 0.75s;
}
[id^="slide"]:checked + .slide-img {
left: 0;
z-index: 100;
transition: left 0.65s ease-out;
}
Cette technique demande de passer par un petit hack pour créer une animation au clic :
- l’utilisation du sélecteur CSS
:checked - les balises
input
Les fonctionnalités sont un peu limitées, mais cela permet d’avoir un slider très simple et peu gourmand en ressources.
Cela peut être avantageux sur un site qui charge déjà beaucoup de plugins JS.
Créer un diaporama d’images en CSS et JS
Revoici notre exemple précédent, un peu remanié, et cette fois-ci avec du JavaScript :
<!DOCTYPE html>
<html>
<head>
<title>Custom Slider</title>
</head>
<body>
<div class="slide-container">
<div class="custom-slider fade">
<div class="slide-index">1 / 3</div>
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide1.jpg">
<div class="slide-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="custom-slider fade">
<div class="slide-index">2 / 3</div>
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide2.jpg">
<div class="slide-text">Nullam luctus aliquam ornare. </div>
</div>
<div class="custom-slider fade">
<div class="slide-index">3 / 3</div>
<img class="slide-img" src="https://www.codeur.com/tuto/wp-content/uploads/2021/12/slide3.jpg">
<div class="slide-text">Praesent lobortis libero sed egestas suscipit.</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div class="slide-dot">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</body>
</html>
.custom-slider { display: none; }
.slide-container {
max-width: 800px;
position: relative;
margin: auto;
}
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: white;
font-size: 30px;
background-color: rgba(0,0,0,0);
transition: background-color 0.6s ease;
}
.prev{ left: 15px; }
.next { right: 15px; }
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.5);
}
.slide-text {
position: absolute;
color: #ffffff;
font-size: 15px;
padding: 15px;
bottom: 15px;
width: 100%;
text-align: center;
}
.slide-index {
color: #ffffff;
font-size: 13px;
padding: 15px;
position: absolute;
top: 0;
}
.slide-img{
width: 100%;
height: 300px;
object-fit: cover;
object-position: center;
}
.slide-dot{ text-align: center; }
.dot {
cursor: pointer;
height: 10px;
width: 10px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover { background-color: #111111; }
.fade {
animation-name: fade;
animation-duration: 1s;
}
@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("custom-slider");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
Le JavaScript permet d’ajouter plus facilement d’autres fonctionnalités, et de ne plus passer par des hacks.
Aussi, on joue moins avec les position: absolute, et notre slider peut s’adapter à plus de situations différentes.
Encore une fois, ce petit code custom permet de ne pas charger de plus gros plugins et d’optimiser les performances de notre site déjà chargé. Aussi, si vous bidouillez souvent en JS, il est plus facile de réaliser un slider avec des fonctionnalités uniques avec du code custom, qu’avec des plugins.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Quelques plugins pour créer un diaporama d’images facilement
Malgré la possibilité de tout faire soi-même, l’utilisation de plugins est beaucoup plus démocratisée, et ça se comprend. Utiliser des bibliothèques JavaScript accélère le temps de travail et permet de ne pas réinventer la roue. Il est souvent possible de les customiser, mais cela demande une bonne connaissance du plugin afin de ne pas casser son fonctionnement !
Voici quelques plugins que je vous conseille fortement :
Bootstrap Carousel
Si vous utilisez Bootstrap, c’est un incontournable étant donné qu’il est déjà présent dans vos assets. Le carousel est simple, possède pas mal de fonctionnalités de base et est facilement customisable.
Voir la documentation officielle du Carousel Bootstrap
Owl Carousel
Owl carousel est un classique du genre, et permet d’aller beaucoup plus loin qu’un simple diaporama d’images. Il peut servir à afficher plusieurs images ou éléments HTML/CSS à la fois, possède plein d’options comme du drag, swipe, auto-height… Bref, testez-le, c’est un incontournable !
Voir le site d’Owl Carousel
Slick
Slick possède un peu plus de fonctionnalités qu’Owl Carousel, mais est un peu moins utilisé. Ce qui veut dire moins de ressources, et moins d’aide sur le net si vous avez un soucis ! Il reste cependant un excellent plugin lightweight et facile d’utilisation.
Voir le site de Slick
Conclusion
Vous connaissez désormais les différentes méthodes pour créer un carousel d’image !
N’oubliez pas que vous pouvez trouver des développeurs web disponibles pour vous aider à créer vos animations CSS et diaporamas d’images pour votre site web sur Codeur.com !
Bonjour, super le diapo 😀
Comment ajouter un défilement automatique ?