Sujet Précédent Sujet Suivant

Ajout boutons pour images défilantes

Fermé
perplexe - 11 mars 2023 à 19:32
jordane45 Messages postés 38340 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 décembre 2024 - 11 mars 2023 à 19:35

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:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38340 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 décembre 2024 4 716
11 mars 2023 à 19:35

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