Ajout boutons pour images défilantes
perplexe
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
J'ai fait un script qui permet de faire défiler des images sur ma page web, mais je n'arrive pas à ajouter des boutons permettant à l'utilisateur de changer d'image.
Voici mon code :
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Custom Slider</title>
<link rel="stylesheet" href="diaporama2.css">
</head>
<body>
<div class="slideshow-container">
<ul class="slides">
<li class="slide">
<img src="1.jpg" alt="image1">
<div class="caption">Caption 1</div>
</li>
<li class="slide">
<img src="2.jpg" alt="image2">
<div class="caption">Caption 2</div>
</li>
<li class="slide">
<img src="3.png" alt="image3">
<div class="caption">Caption 3</div>
</li>
</ul>
</div>
</body>
<script src="diaporama2.js" charset="utf-8"></script>
</html>
CSS :
.slideshow-container {
position: relative;
overflow: hidden;
}
.slides {
display: flex;
width: 300%;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 33.33%;
position: relative;
}
.slide img {
width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
JavaScript :
const slides = document.querySelector('.slides');
const slide = document.querySelectorAll('.slide');
const caption = document.querySelectorAll('.caption');
const slideWidth = slide[0].clientWidth;
let currentSlide = 0;
let slideInterval = setInterval(nextSlide, 3000);
function nextSlide() {
currentSlide++;
if (currentSlide >= slide.length) {
currentSlide = 0;
}
slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
}
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
prevButton.addEventListener('click', () => {
currentSlide--;
if (currentSlide < 0) {
currentSlide = slide.length - 1;
}
slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
});
nextButton.addEventListener('click', () => {
currentSlide++;
if (currentSlide >= slide.length) {
currentSlide = 0;
}
slides.style.transform = `translateX(-${currentSlide * slideWidth}px)`;
});
A voir également:
- Pascal veut modifier une photo mais c’est la visionneuse d’images qui l’ouvre. que doit-il choisir pour l’ouvrir avec son logiciel de traitement d’image ?
- Comment ouvrir un fichier epub ? - Guide
- Ouvrir fichier .bin - Guide
- Visionneuse photo windows 7 - Télécharger - Visionnage & Diaporama
- Turbo pascal - Télécharger - Édition & Programmation
- Modifier dns - Guide
1 réponse
Bonjour
Visiblement tu as dû trouver ce code quelque part sur Internet....
Si tu regardes un petit peu le javascript, tu verras qu'il y a des éléments concernant le bouton suivant et le bouton précédent.
Par contre, dans ton code html, aucune trace de ces éléments....
Il faudrait donc déjà commencer par ajouter des boutons dans ton HTML.