I use a Slideshow on my website to post images for blog articles. When I went to add more than one slideshow to my article, the slideshows stopped working altogether. Currently, if this code is ran as is, it will not load any of the images onto the screen. It would only show the arrows that can be clicked with no action occurring thereafter. I have below the code used for this in HTML, CSS, Javascript. If someone can somehow get this working for me, I would greatly appreciate it.

HTML:

<div >
   <div >1 / 2</div>
   <img  src="/images/2022/04/image.jpg" style="width:100%">
    <div >Text here</div>
</div>

<div >
    <div >2 / 2</div>
    <img  src="/images/2022/04/image-2.jpg" style="width:100%">
    <div >Text here</div>
</div>

<a  onclick="plusSlides(-1, 0)">&#10094;❮</a>
<a  onclick="plusSlides(1, 0)">&#10095;❯</a>

<div >
    <div >1 / 2</div>
    <img src="/images/2022/04/photo_2022-04-02_19-33-27.jpg" style="width:100%">
    <div >caption here</div>
</div>

<div >
    <div >2 / 2</div>
    <img src="/images/2022/04/photo_2022-04-02_19-33-18.jpg" style="width:100%">
    <div >caption .</div>
</div>

<a  onclick="plusSlides(-1, 1)">&#10094;❮</a>
<a  onclick="plusSlides(1, 1)">&#10095;❯</a>

CSS:

    /* Article Image */

.the-article-imgs {
  height: 100%;
  max-width: 990px;
  min-width: 100%;
  width: 100%;
}

.the-article-imgs-caption {
  text-align: center;
}

.the-article-imgs-vert {
  height: 45%;
  max-width: 456px;
  min-width: 54%;
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Slideshow Image Code */

* {box-sizing: border-box}

.mySlides, .mySlides1, .mySlides2, mySlides3, .mySlides4, .mySlides5, .mySlides6:first-of-type, {display: block;}

.mySlides, .mySlides1, .mySlides2, mySlides3, .mySlides4, .mySlides5, .mySlides6 {display: none;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

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

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

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text 
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}*/

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

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

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

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

Javascript:

let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);

function plusSlides(n, no) {
  showSlides(slideIndex[no]  = n, no);
}

function showSlides(n, no) {
  let i;
  let x = document.getElementsByClassName(slideId[no]);
  if (n > x.length) {slideIndex[no] = 1}    
  if (n < 1) {slideIndex[no] = x.length}
  for (i = 0; i < x.length; i  ) {
     x[i].style.display = "none";  
  }
  x[slideIndex[no]-1].style.display = "block";  
}

CodePudding user response：

the script needs to be downloaded in parallel to parsing the page. you need to add async when calling your js file <script src="index.js" async></script>