Slide pour Silex v3

Jeaan-phi

Bonjour à tous,

je travail en ce moment sur la mise en place d'un slider, mais je rencontre un souci avec, je pense le code JavaScript.
J'ai mis le code HTML dans une box custom

Le code JavaScript dans HTML head

 <script src="script.js"></script> <script> let slideIndex = 0; showSlides(slideIndex); function moveSlide(n) { showSlides(slideIndex += n); } function showSlides(n) { let slides = document.getElementsByClassName("slide"); if (n >= slides.length) { slideIndex = 0; } if (n < 0) { slideIndex = slides.length - 1; } for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[slideIndex].style.display = "block"; } </script>

Voici le résultat une fois publié:

[https://658bfa3ebd2a384dd6df0f58--fastidious-beijinho-ea90b6.netlify.app/]

J'ai loupé quelque chose sur le fonctionnement de Silex ?
Sur la console, le fichier Javascript est vide ...

lexoyo

Hello, bonne année !!!

dans la console tu peux voir Uncaught TypeError: slides[slideIndex] is undefined

c'est étrange parce que ca m'a l'air bon ton code

Jeaan-phi

Ça fonctionne, maintenant, il y avait un soucis dans le code JavaScript.

Tu penses que se serai intéressant pour les utilisateurs de faire une page Widget avec les codes a intégrer directement dans Silex v3 ?

Voici le code bon code JavaScript:

<script>
    let slideIndex = 0; // Déclarée à l'extérieur des fonctions

    function moveSlide(n) {
      showSlides(slideIndex += n);
    }

    function showSlides(n) {
      let slides = document.getElementsByClassName("slide");

      if (n >= slides.length) {
        slideIndex = 0;
      }
      if (n < 0) {
        slideIndex = slides.length - 1;
      }

      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
      }

      slides[slideIndex].style.display = "block";
    }

    // Gestionnaires d'événements une fois que le DOM est chargé
    document.addEventListener("DOMContentLoaded", function() {
      showSlides(slideIndex);

      // Gestionnaire d'événement pour le bouton "précédent"
      document.querySelector(".prev").addEventListener("click", function() {
        moveSlide(-1);
      });

      // Gestionnaire d'événement pour le bouton "suivant"
      document.querySelector(".next").addEventListener("click", function() {
        moveSlide(1);
      });
    });
  </script>

lexoyo

Jeaan-phi Tu penses que se serai intéressant pour les utilisateurs de faire une page Widget avec les codes a intégrer directement dans Silex v3 ?

Ah oui surement
Qu'en pensez vous @ceubri @jonas ?

lexoyo

@Jeaan-phi petite astuce pour colle un script, au lieu de mettre 1 seule ` comme tu as fait, tu peux en mettre 3 (```) et ca fera un beau bloc de code 🙂

ceubri

je vois pas le résultat mais je dis oui !