18041 sujets

Questions générales et questions de débutants

Plusieurs slideshow dans une même page

Bonjour à tous,

Débutante, je bricole sans toujours comprendre ce que je fais... En l'occurrence j'aimerais faire en sorte que s'affichent bien 5 slideshow simultanément sur ma page web et non successivement comme c'est le cas actuellement : http://dong-xi.net/
Le slideshow est dans le bon ordre mais il fonctionne sur une boucle alors que je voudrais qu'il y en ait 5 bien distinctes. Est-il possible de faire fonctionner le script 5x ?
Si quelqu'un peut m'aider d'un indice, je l'en remercie d'avance! Smiley smile

Voilà le script que j'utilise :

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = 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>



un extrait du code html:

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="images/breches1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="images/breches2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="images/breches3.jpg" style="width:100%">
  </div>
  
    <div class="mySlides fade">
    <img src="images/breches4.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>



et le code css:

* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 55%;
  position: relative;
  margin-top:22%;
  margin-left:2%;
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 2%;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
Hello

Tu dis vouloir afficher 5 slideshows simultanément mais dans ton HTML je ne vois qu'un seul slideshow avec 4 images.
Modifié par allan00958 (08 Sep 2017 - 09:13)
Salut

J'ai pas vraiment compris ton besoin

5 slideshow simultanément sur ma page web et non successivement
peux-tu détaillés ?

Le slideshow est dans le bon ordre mais il fonctionne sur une boucle alors que je voudrais qu'il y en ait 5 bien distinctes
Le slideshow ?? lequel ? pas trop compris...
le bon ordre par rapport à quoi ?
quel boucle ?
Moi j'en vois 5 distinctes, les uns à la suite des autres.

Ton script je ne le comprends pas non plus 
var dots = document.getElementsByClassName("dot");

Je ne vois aucune classe dot dans ton HTML..

Merci de nous éclairer Smiley id
Tu fais un 
 slides[slideIndex-1].style.display = "block";


mais ton objet "slides" est null.. ça plante. je pense que ton script tu devrais le mettre dans des balises <script></script> avant la fermeture de ton </body> pour que les éléments HTML puissent êtres chargé lors de l’interprétation du script.
Oh zut, je n'ai pas eu de notifications et pensais que le sujet était resté sans réponse...
Merci pour votre réactivité et vos réponses!

Pardon pour le flou, j'essaye de préciser: le script que j'ai là fonctionne très bien sur ma page (même si peut-être pas très propre...) et le premier diaporama s'affiche correctement;
le problème est que je voudrais utiliser le même script pour en afficher 4 autres (tous avec un contenu différent) sur la même page. Est-ce possible?
Faut-il modifier la class pour "slideshow-container2" puis "slideshow-container3" puis... mais alors ensuite comment faire en sorte que le script fonctionne pour les 5?
Bon vous l'aurez compris, je suis vraiment novice

Merci à vous Smiley smile


(le lien donné n'est plus valide, j'avais chargé la page le temps de la question sur mon site perso mais ne peux pas la laisser)

<script>
var slideIndex = 1;
showSlides(slideIndex);

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

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
		  var slides = document.getElementsByClassName("mySlides");
  var dots = 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>



<div class="slideshow-container">
  <div class="mySlides">
    <img src="images/breches1.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/breches2.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/breches3.jpg" style="width:100%">
  </div>
  
    <div class="mySlides">
    <img src="images/breches4.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


<div class="slideshow-container2">
  <div class="mySlides">
    <img src="images/banquet1.jpg" style="width:100%">
  </div>
  <div class="mySlides">
    <img src="images/banquet2.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


<div class="slideshow-container3">
  <div class="mySlides">
    <img src="images/riz1.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/riz2.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/riz3.jpg" style="width:100%">
  </div>
  
  <div class="mySlides">
    <img src="images/riz4.jpg" style="width:100%">
  </div>
  
  <div class="mySlides">
    <img src="images/oeuf1.jpg" style="width:100%">
  </div>
  
  <div class="mySlides">
    <img src="images/oeuf2.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


<div class="slideshow-container4">
  <div class="mySlides">
    <img src="images/feutres1.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/feutres2.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>


<div class="slideshow-container5">
  <div class="mySlides5">
    <img src="images/objson1.jpg" style="width:100%">
  </div>

  <div class="mySlides">
    <img src="images/objson2.jpg" style="width:100%">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>





* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 55%;
  position: relative;
  margin-top:22%;
  margin-left:2%;
}

.mySlides {
    display: none;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 2%;
  color: black;
  font-weight: bold;
  font-size: 1.5em;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}


/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
Sujet clos
Aller à