.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.

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 !