Catégories : CSS

Comment créer un diaporama d’image en HTML et CSS ?

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.

 

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

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

Partager
Tags : Tuto