adamIP

Many thanks! All working. 

I have inserted the script at the bottom of the html page.

However, I cannot work out how to allow all four 'sector slides' to display at above 715px without breaking the slideshow (allowing for screen resize, not just initial load). Any ideas? 

Cheers,

A.

Sectors.html

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";
}