Partage
  • Partager sur Facebook
  • Partager sur Twitter

[HTML] Conflit deux diaporamas page web

ThomasMaguin
    18 janvier 2024 à 11:26:27

    Bonjour à tous,

    Je suis en train de créer mon site web et étant un débutant à ce sujet, j'aurais besoin de votre aide.

    Dans une de mes pages, j'ai intégrer une glissière (diaporama) a l'aide du code suivant.

    Le problème c'est que lorsque je veux intégrer une seconde glissière plus bas dans la page, le deux glissières semble connectées entre-elles.

    Comment je pourrais modifier le code de sorte à ce qu'elle ne soient pas interconnectées mais bien indépendante l'une de l'autre.

    Je vous remercie pour votre aide.


    <!DOCTYPEhtml>

<html>
  <head>
    <title>Images de diaporama</title>
    <style>
* {
box-sizing: border-box;
      }
body {
font-family: Verdana, sans-serif;
margin: 0;
      }
.mySlides {
display: none;
      }
img {
vertical-align: middle;
      }
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
      }
/* Boutons next & previous */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: rgb(0, 0, 0);
font-weight: bold;
font-size: 18px;
transition: 0.6sease;
border-radius: 03px3px0;
user-select: none;
      }
/* Position de "next button" à la droite */
.next {
right: 0;
border-radius: 3px003px;
      }
/* En survol, ajoutez la couleur noire de l'arrière-plan avec un peu see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
      }
/* Caption */
.text {
color: #ffffff;
font-size: 15px;
padding: 8px12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
      }
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px12px;
position: absolute;
top: 0;
      }
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 02px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6sease;
      }
.active,
.dot:hover {
background-color: #111111;
      }
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
      }
@-webkit-keyframesfade {
        from {
opacity: 0.4;
        }
        to {
opacity: 1;
        }
      }
@keyframesfade {
        from {
opacity: 0.4;
        }
        to {
opacity: 1;
        }
      }
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px;
        }
      }
</style>
  </head>
  <body>
    <div class="slideshow-container">
      <div class="mySlides fade">
        <div class="numbertext">1 / 3</div>
        <img src="images/..." style="width: 100%;" />
        <div class="text">Carte Mercantour</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">2 / 3</div>
        <img src="images/...." style="width: 100%;" />
        <div class="text">Sunset in Romania</div>
      </div>
      <div class="mySlides fade">
        <div class="numbertext">3 / 3</div>
        <img src="images/..." style="width: 100%;" />
        <div class="text">New York, USA</div>
      </div>
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
      <a class="next" onclick="plusSlides(1)">&#10095;</a>
    </div>
    <br />
    <div style="text-align: center;">
      <span class="dot" onclick="currentSlide(1)"></span>
      <span class="dot" onclick="currentSlide(2)"></span>
      <span class="dot" onclick="currentSlide(3)"></span>
    </div>
    <script>
varslideIndex = 1;
showSlides(slideIndex);

functionplusSlides(n) {
showSlides((slideIndex += n));
      }

functioncurrentSlide(n) {
showSlides((slideIndex = n));
      }

functionshowSlides(n) {
vari;
varslides = document.getElementsByClassName("mySlides");
vardots = 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";
      }
</script>
  </body>
</html>



    -
    Edité par ThomasMaguin 19 janvier 2024 à 12:20:24

    • Partager sur Facebook
    • Partager sur Twitter
    AbcAbc6
      18 janvier 2024 à 12:00:51

      Bonjour,

      Le message qui suit est une réponse automatique activée par un membre de l'équipe de modération. Les réponses automatiques leur permettent d'éviter d'avoir à répéter de nombreuses fois la même chose, ce qui leur fait gagner du temps et leur permet de s'occuper des sujets qui méritent plus d'attention.
      Nous sommes néanmoins ouverts et si vous avez une question ou une remarque, n'hésitez pas à contacter la personne en question par Message Privé.
      Pour plus d'informations, nous vous invitons à lire les règles générales du forum

      Merci de colorer votre code à l'aide du bouton Code </>

      Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton  </> de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: php;">Votre code ici</pre>.

      Merci de modifier votre message d'origine en fonction.

      Liens conseillés

      • Partager sur Facebook
      • Partager sur Twitter
      EmilienCosson2
        21 janvier 2024 à 14:26:40

        Bonjour,

        Vous souhaitez isoler la logique du code qui vous permet d'afficher un diaporama et de faire défiler ses photos, de sorte que si vous créez deux diaporamas sur la même page, interagir avec l'un n'a aucun impact avec l'autre.

        Votre problème réside actuellement dans le fait que lorsque vous appelez la fonction showSlides par l'intermédiaire de currentSlide ou plusSlide lors d'un clic de l'utulisateur, vous récupérez les éléments images et les éléments points du DOM, sans pour autant discriminer à quels diaporamas ces élements appartiennent.

        varslides=document.getElementsByClassName("mySlides");
        vardots=document.getElementsByClassName("dot");

        Ainsi, si l'utilisateur clique sur la flèche droite du diaporama n° 1, le tableau slides ci-dessus qui représente vos images contiendra en désordre les images du diaporama n° 1 mais aussi celles du diaporama n° 2 le cas échéant. Puis, vous faites des actions sur ce tableau qui change l'état de vos deux diaporamas.

        Il faut donc discriminer vos diaporamas par une nouvelle classe, et quoi de mieux de le faire une seule fois en entourant tout votre diaporama d'un nouveau noeud div ? Nommons-le slideshow-{numero}. Il englobe à la fois votre slideshow-container mais aussi vos points. Je vous invite aussi à créer un deuxième diaporamas en copiant collant tout votre noeud slideshow-1 et à renommer la classe slideshow-2.

        Il reste alors à adapter votre code pour changer la bonne partie de l'état de vos slides.

        Voici le code qui résout votre problème.

        index.html:

        <!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Demo diapo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="slideshow-1">
      <div class="slideshow-container">
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img
            src="https://img.freepik.com/photos-gratuite/tour-eiffel-paris-couleurs-magnifiques-automne_268835-828.jpg?size=626&ext=jpg&ga=GA1.1.632798143.1705708800&semt=ais"
            style="width: 100%"
          />
          <div class="text">Carte Mercantour</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img
            src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D"
            style="width: 100%"
          />
          <div class="text">Sunset in Romania</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img
            src="https://media.istockphoto.com/id/1324189687/fr/photo/arc-de-triomphe-du-ciel-paris.jpg?s=612x612&w=0&k=20&c=dV9mu_FSVtByHp995ogUpKX8YbZ8dyjawRzADSfOKVE="
            style="width: 100%"
          />
          <div class="text">New York, USA</div>
        </div>
        <a class="prev" onclick="plusSlides(1, -1)">&#10094;</a>
        <a class="next" onclick="plusSlides(1, 1)">&#10095;</a>
      </div>
      <br />
      <div style="text-align: center">
        <span class="dot" onclick="currentSlide(1, 1)"></span>
        <span class="dot" onclick="currentSlide(1, 2)"></span>
        <span class="dot" onclick="currentSlide(1, 3)"></span>
      </div>
    </div>
    <div class="slideshow-2">
      <div class="slideshow-container">
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img
            src="https://img.freepik.com/photos-gratuite/tour-eiffel-paris-couleurs-magnifiques-automne_268835-828.jpg?size=626&ext=jpg&ga=GA1.1.632798143.1705708800&semt=ais"
            style="width: 100%"
          />
          <div class="text">Carte Mercantour</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img
            src="https://images.unsplash.com/photo-1499856871958-5b9627545d1a?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxleHBsb3JlLWZlZWR8MXx8fGVufDB8fHx8fA%3D%3D"
            style="width: 100%"
          />
          <div class="text">Sunset in Romania</div>
        </div>
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img
            src="https://media.istockphoto.com/id/1324189687/fr/photo/arc-de-triomphe-du-ciel-paris.jpg?s=612x612&w=0&k=20&c=dV9mu_FSVtByHp995ogUpKX8YbZ8dyjawRzADSfOKVE="
            style="width: 100%"
          />
          <div class="text">New York, USA</div>
        </div>
        <a class="prev" onclick="plusSlides(2, -1)">&#10094;</a>
        <a class="next" onclick="plusSlides(2, 1)">&#10095;</a>
      </div>
      <br />
      <div style="text-align: center">
        <span class="dot" onclick="currentSlide(2, 1)"></span>
        <span class="dot" onclick="currentSlide(2, 2)"></span>
        <span class="dot" onclick="currentSlide(2, 3)"></span>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

         main.js:

        var slideIndex = [1, 1];

for (let i = 1; i <= slideIndex.length; i++) {
  showSlides(i, 1);
}

function plusSlides(slideshowNumber, n) {
  slideIndex[slideshowNumber - 1] += n;
  showSlides(slideshowNumber, slideIndex[slideshowNumber - 1]);
}
function currentSlide(slideshowNumber, n) {
  slideIndex[slideshowNumber - 1] = n;
  showSlides(slideshowNumber, slideIndex[slideshowNumber - 1]);
}
function showSlides(slideshowNumber, n) {
  var i;
  var slides = document.querySelectorAll(
    ".slideshow-" + slideshowNumber + " .mySlides"
  );
  var dots = document.querySelectorAll(
    ".slideshow-" + slideshowNumber + " .dot"
  );
  if (n > slides.length) {
    slideIndex[slideshowNumber - 1] = 1;
  }
  if (n < 1) {
    slideIndex[slideshowNumber - 1] = 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[slideshowNumber - 1] - 1].style.display = "block";
  dots[slideIndex[slideshowNumber - 1] - 1].className += " active";
}

         style.css:

        * {
  box-sizing: border-box;
}
body > div {
  font-family: Verdana, sans-serif;
  margin: 0;
}
.mySlides {
  display: none;
}
img {
  vertical-align: middle;
}
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
/* Boutons next & previous */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: rgb(0, 0, 0);
  font-weight: bold;
  font-size: 18px;
  transition: 0.6sease;
  border-radius: 03px3px0;
  user-select: none;
}
/* Position de "next button" à la droite */
.next {
  right: 0;
  border-radius: 3px003px;
}
/* En survol, ajoutez la couleur noire de l'arrière-plan avec un peu see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Caption */
.text {
  color: #ffffff;
  font-size: 15px;
  padding: 8px12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
  color: #ffffff;
  font-size: 12px;
  padding: 8px12px;
  position: absolute;
  top: 0;
}
/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 02px;
  background-color: #999999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6sease;
}
.active,
.dot:hover {
  background-color: #111111;
}
/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
@-webkit-keyframesfade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
@keyframesfade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev,
  .next,
  .text {
    font-size: 11px;
  }
}





        Notez qu'une approche où le diaporama est créé dans le code javascript serait meilleure que celle que vous utilisez actuellement, dans lequel le diaporama et ses images sont définis statiquement dans le layout, c'est-à-dire dans votre code html. Cette approche est perçue comme plus professionnelle, plus facilement maintenable et aura un but pédagogique dans votre apprentissage.

        Le but de cette approche, c'est non plus de définir les informations suivantes dans le code html mais dans votre code javascript :

        - Combien y a-t-il de diaporamas affichés dans la page ?

        - Combien y-a-il d'images de disponible dans chacun des diaporamas dans la page ?

        - Quelles sont les images disponibles dans chacun des diaporamas.

        La layout html devrait donc s'adapter aux informations détenues par votre partie script.

        Bon courage dans votre apprentissage Thomas :D

        • Partager sur Facebook
        • Partager sur Twitter
        ThomasMaguin
          22 janvier 2024 à 12:22:34

          Bonjour Emilien,

          Merci pour votre réponse, très claire, qui me permet d'en apprendre plus.

          Je vous souhaite une excellente journée.

          Bien à vous,

          Thomas

          • Partager sur Facebook
          • Partager sur Twitter

          [HTML] Conflit deux diaporamas page web

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          • Editeur ●
          • Markdown