My website utilizes a Slideshow feature to display images for blog posts. Recently, I attempted to include multiple slideshows within an article, which unfortunately caused all of the slideshows to malfunction. As it stands now, when the code is executed, none of the images are displayed on the screen. Only the navigation arrows appear, but clicking on them does not have any effect. Below, you can find the HTML, CSS, and JavaScript code used for this functionality. I would greatly appreciate it if someone could help me resolve this issue.
HTML:
<div class="mySlides1">
<div class="numbertext">1 / 2</div>
<img class="the-article-imgs-vert" src="/images/2022/04/image.jpg" style="width:100%">
<div class="the-article-imgs-caption">Text here</div>
</div>
<div class="mySlides1">
<div class="numbertext">2 / 2</div>
<img class="the-article-imgs" src="/images/2022/04/image-2.jpg" style="width:100%">
<div class="the-article-imgs-caption">Text here</div>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯❯</a>
<div class="mySlides2">
<div class="numbertext">1 / 2</div>
<img src="/images/2022/04/photo_2022-04-02_19-33-27.jpg" style="width:100%">
<div class="the-article-imgs-caption">caption here</div>
</div>
<div class="mySlides2">
<div class="numbertext">2 / 2</div>
<img src="/images/2022/04/photo_2022-04-02_19-33-18.jpg" style="width:100%">
<div class="the-article-imgs-caption">caption .</div>
</div>
<a class="prev" onclick="plusSlides(-1, 1)">❮❮</a>
<a class="next" onclick="plusSlides(1, 1)">❯❯</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 {
max-width: 1000px;
position: relative;
margin: auto;
}
.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;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
.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;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@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";
}