I was using this W3 image slideshow on my website. I wanted to use more than one, but if I try to add a second one, it doesn't work - the second one just displays as regular images on the next lines.
I tried changing the image class on both the js and HTML (after duplicating the js for the second slideshow), but that makes the first one stop working.
I can't seem to figure out how to make more than one slideshow work.
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (var i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}.mySlides {
display: block;
margin-left: auto;
margin-right: auto;
}
.r-button {
color: #795548;
background-color: inherit;
border: none;
display: inline-block;
padding: 8px 16px;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.l-button {
color: #795548;
background-color: inherit;
border: none;
display: inline-block;
padding: 8px 16px;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.container {
text-align: center;
}<!--
image sources (using images from online so it's visible):
https://www.pexels.com/photo/cash-coins-money-pattern-259165/
https://www.pexels.com/photo/silver-liberty-in-god-we-trust-1978-coin-64824/
https://www.pexels.com/photo/a-set-of-trampolines-in-a-park-4930675/
https://www.pexels.com/photo/raised-building-frame-169647/
https://www.pexels.com/photo/view-of-cityscape-325185/
https://www.pexels.com/photo/black-outdoor-pedestal-lamp-near-coaster-train-rail-92248/
-->
<div >
<img src="https://images.pexels.com/photos/259165/pexels-photo-259165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/64824/pexels-photo-64824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/4930675/pexels-photo-4930675.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
<div >
<img src="https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/92248/pexels-photo-92248.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>It runs a little differently here for some reason, but still does not work.
CodePudding user response：
You must duplicate the functions and change the div class names they target. Here's a quick example, just duplicating everything by adding 2 to the duplicated functions/elements (img class, prev/forward buttons, javascript functions that change the index and identify the container).
var slideIndex = 1;
showDivs(slideIndex);
showDivs2(slideIndex);
function plusDivs(n) {
showDivs(slideIndex = n);
}
function plusDivs2(n) {
showDivs2(slideIndex = n);
}
function showDivs(n) {
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (var i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
function showDivs2(n) {
var x = document.getElementsByClassName("mySlides2");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (var i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}.mySlides {
display: block;
margin-left: auto;
margin-right: auto;
}
.mySlides2 {
display: block;
margin-left: auto;
margin-right: auto;
}
.r-button {
color: #795548;
background-color: inherit;
border: none;
display: inline-block;
padding: 8px 16px;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.l-button {
color: #795548;
background-color: inherit;
border: none;
display: inline-block;
padding: 8px 16px;
overflow: hidden;
text-decoration: none;
text-align: center;
cursor: pointer;
white-space: nowrap
}
.container {
text-align: center;
}<div >
<img src="https://images.pexels.com/photos/259165/pexels-photo-259165.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/64824/pexels-photo-64824.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/4930675/pexels-photo-4930675.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<button onclick="plusDivs(-1)">❮</button>
<button onclick="plusDivs(1)">❯</button>
</div>
<div >
<img src="https://images.pexels.com/photos/169647/pexels-photo-169647.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/325185/pexels-photo-325185.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<img src="https://images.pexels.com/photos/92248/pexels-photo-92248.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2" style="width:300px">
<button onclick="plusDivs2(-1)">❮</button>
<button onclick="plusDivs2(1)">❯</button>
</div>