Découvrons ensemble comment réaliser un diaporama d'images simple et efficace avec HTML, CSS et JavaScript !
Débutons par le code HTML.
<div class="container">
<div class="slides">
<img src="https://zupimages.net/up/20/51/7ada.jpg" style="width:100%">
</div>
<div class="slides">
<img src="https://zupimages.net/up/20/51/cdrk.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
</div>
Nous ajoutons les deux images, dans deux classes slides différentes.
Puis, nous ajoutons deux ronds en bas des images, et deux boutons pour pouvoir changer de slide.
Stylisons maintenant les slides.
.container {
max-width: 1000px;
margin: auto;
position: relative;
}
.slides {
display: none;
}
On va ici styliser la classe .container
, qui englobe les deux images et les deux boutons.
Stylisons les boutons.
.prev,
.next {
cursor: pointer;
color: white;
position: absolute;
top: 50%;
transform: translate(0, -50%);
padding: 16px;
border-radius: 0 3px 3px 0;
background: rgba(0, 0, 0, .5);
transition: all .3s;
}
Occupons-nous des boutons de façon plus spécifique.
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background: rgba(0, 0, 0, .8);
}
Ici, on stylise plus précisément le bouton .next
, à droite et on donne un effet de transparence quand le curseur passe dessus avec la pseudo-classe hover.
Créons maintenant les ronds en bas du diaporama.
.dot {
cursor: pointer;
height: 15px;
width: 15px;
border-radius: 50%;
margin: 10px 2px 0 2px;
display: inline-block;
background: #ddd;
transition: all .3s;
}
.active,
.dot:hover {
background: #717171;
}
Passons au code JavaScript.
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
Le JavaScript va permettre de gérer le diaporama entre les deux images au moment du clic sur les boutons.
Continuons en nous occupons de la fonction qui permettra d'afficher les slides.
function showSlides(n) {
let slides = document.getElementsByClassName('slides');
let dots = document.getElementsByClassName('dot');
if(n > slides.length) { slideIndex = 1 }
if(n < 1 ) { slideIndex = slides.length }
// Cacher toutes les slides
for(let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
// Retirer "active" de tous les points
for(let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active');
}
// Afficher la slide demandée
slides[slideIndex - 1].style.display = 'block';
// Ajouter "active" sur le point cliqué
dots[slideIndex - 1].classList.add('active');
}
Tout se passe grâce à la variable slideIndex
, c’est elle qui va gérer l’ensemble de nos slides et celles que nous allons afficher.
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.