Hi @dsonesuk,
I would be extremely appreciative if you could offer guidance on a similar issue to the above.
I'm trying to implement multiple slideshows on the same page using the technique here: https://www.w3schools.com/w3css/w3css_slideshow.asp
When I only have 1 slideshow on the page it works great, however, when I use the technique for two it breaks.
The page in question is https://theipguide.com/Sectors.html (reduced width). My slideshow items are classed 'sectorSlide' and contained in 'slideshow'. There are currently 13 sectors!
The javascript (in scroll.js) is currently:
var slideIndex = 1;
var z = document.getElementsByClassName("slideshow");
for (i = 0; i < z.length; i++) {
//set custom data attribute to first current image index
z.setAttribute("data-currentslide", 1);
showDivs(z.getAttribute("data-currentslide"), i);
}
function plusDivs(n, j) {
//get custom data attribute value of current image index to slideshow class index j
slideIndex = parseInt(z[j].getAttribute("data-currentslide"));
showDivs(slideIndex += n, j);
}
function currentDiv(n, j) {
showDivs(slideIndex = n, j); /* showDivs Not showSlides*/
}
function showDivs(n, j) {
var i;
var z = document.getElementsByClassName("slideshow")[j];
var x = z.getElementsByClassName("sectorSlide");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length;
}
//set custom data attribute to current image index
z.setAttribute("data-currentslide", slideIndex);
for (i = 0; i < x.length; i++) {
x.style.display = "none";
}
x[slideIndex - 1].style.display = "block";
}