My slideshow not functioning as it should...

[Agent67]

So, my slideshow is bugging out. Basically, the first image of the slideshow shows on startup (as it should), but when I click the buttons to operate the slideshow, it basically spawns the other images in the slideshow below the initial image (in sequence, so if the second image is visible and I click the next button, then the third slide spawns, etc), and after everything has basically spawned, they just trade places on the page to become the world's worst slideshow... (This is the most difficult part of the assignment, funnily enough, JSON and AJAX should go way easier than this...) I've tried messing around with the CSS and adapt the script here and there, but I'm no closer to the solution...

Code:

// the slideshow element
let slideShowDiv = document.getElementById("slideshow");

/* Slideshow */
if (fileName[0] === "index.html")
{
    let images = ["images/hero.jpg", "images/staff.jpg", "images/clamps_create.jpg"];
    let imgCount = images.length;
    document.addEventListener("load", createSlideShow());

    function createSlideShow()
    {
        // create the parts of the slideshow
        let previousSlideButton = document.createElement("div");
        let nextSlideButton = document.createElement("div");
        let slideImages = document.createElement("div");

        previousSlideButton.id = "previous_slide_button";
        nextSlideButton.id = "next_slide_button";
        slideImages.id = "slide_images";

        previousSlideButton.innerHTML = "&#9664";
        nextSlideButton.innerHTML = "&#9654";
        let currentImg = 1;

        slideShowDiv.appendChild(previousSlideButton);
        slideShowDiv.appendChild(nextSlideButton);
        slideShowDiv.appendChild(slideImages);

        const createOverlay = (image) => {
            let overlay = document.createElement("div");
            overlay.id = "overlay";

            let overlayImgHolder = document.createElement("img");
            overlay.appendChild(overlayImgHolder);

            overlayImgHolder.appendChild(image);

            let closeButtonHolder = document.createElement("div");
            closeButtonHolder.id = "close_overlay";
            closeButtonHolder.innerHTML = "×";
            closeButtonHolder.onclick = () => {
                document.body.removeChild(overlay);
            };
            overlay.appendChild(closeButtonHolder);

            document.body.appendChild(overlay);
        };

        // add the images to the slide_images element
        for (let i = 0; i < imgCount; i++)
        {
            let image = document.createElement("img");
            image.src = images[i];
            image.style.display = "none";
            image.onclick = createOverlay(image);
            slideImages.appendChild(image);
        }

        slideImages.childNodes[currentImg - 1].style.display = "block";

        const showNextSlide = () => {
            console.log(`counter: ${currentImg}`);
            slideImages.appendChild(slideImages.firstElementChild);
            (currentImg < imgCount) ? currentImg++ : currentImg = 1;
        };

        const showPreviousSlide = () => {
            console.log(`counter: ${currentImg}`);
            slideImages.insertBefore(slideImages.lastElementChild, slideImages.firstElementChild);
            (currentImg > 1) ? currentImg-- : currentImg = imgCount;
        };

        previousSlideButton.onclick = showPreviousSlide;
        nextSlideButton.onclick = showNextSlide;
    }
}

CSS:

 /* Desktop: Slideshow */
    #slideshow {
        max-width: 100%;
        position: relative;
        margin-bottom: 5em;
        top: 0;
    }

    #slide_images > img{
        height: min-content;
    }

    #previous_slide_button, #next_slide_button {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        z-index: 1;
    }

    #next_slide_button {
        right: 0;
    }

    #overlay {
        display: none;
    }

 

[Barbarian Conan]

Add the html as well and I'll have a look.

 

[Agent67]

Add the html as well and I'll have a look.

<!-- Slideshow -->
            <div id="slideshow">
            </div>

That's all. The rest I got is just my nav and the footer.

 

[Barbarian Conan]

<!-- Slideshow -->
            <div id="slideshow">
            </div>

That's all. The rest I got is just my nav and the footer.

Have you debugged it in Chrome Dev Tools?
When it loads, it looks like this:



I click next, and it looks like this:

And again:


Can you see the problem? (I applied my own styles to make it easier to work with)
Edit: Use a 0 based index.
let currentImg = 0; not 1

 

[Agent67]

Have you debugged it in Chrome Dev Tools?
When it loads, it looks like this:

View attachment 1384644

I click next, and it looks like this:
View attachment 1384646
And again:
View attachment 1384648

Can you see the problem? (I applied my own styles to make it easier to work with)
Edit: Use a 0 based index.
let currentImg = 0; not 1

The images are switching but not their "display" properties (the 1st one is displayed, but even tho the images do switch, the "display" properties, don't). I mean, I knew the counter was right since I tested the counter in the console. But as you put it above, the image didn't change at all, which stumped me...

So the problem is how to make the current image visible, but the others invisible.

 

[Barbarian Conan]

The images are switching but not their "display" properties (the 1st one is displayed, but even tho the images do switch, the "display" properties, don't). I mean, I knew the counter was right since I tested the counter in the console. But as you put it above, the image didn't change at all, which stumped me...

So the problem is how to make the current image visible, but the others invisible.

Exactly. From your first post i can see that you know how to hide and show images, so no need for help there.
Another question is, why do you need to change the order of the images?

 

[Agent67]

Another question is, why do you need to change the order of the images?

So the slideshow actually works as it should? Since you need to switch the images according to the inputs you give it, if you click on previous, the sequence of the slideshow needs to be reversed (going back to the second image, instead of restarting the sequence) and so on?

 

[Barbarian Conan]

So the slideshow actually works as it should? Since you need to switch the images according to the inputs you give it, if you click on previous, the sequence of the slideshow needs to be reversed (going back to the second image, instead of restarting the sequence) and so on?

Well, yes, depending on how you fix display of the images.
If you have any specific questions I'll help with that.

 

[Agent67]

If you have any specific questions I'll help with that.

I finally cracked it.

/* Slideshow */
if (fileName[0] === "index.html")
{
    let images = ["images/hero.jpg", "images/staff.jpg", "images/clamps_create.jpg", "images/", "images/", "images/", "images/", "images/"];
    let imgCount = images.length;
    document.addEventListener("load", createSlideShow());

    function createSlideShow()
    {
        // create the parts of the slideshow
        let previousSlideButton = document.createElement("div");
        let nextSlideButton = document.createElement("div");
        let slideImages = document.createElement("div");

        previousSlideButton.id = "previous_slide_button";
        nextSlideButton.id = "next_slide_button";
        slideImages.id = "slide_images";

        previousSlideButton.innerHTML = "&#9664";
        nextSlideButton.innerHTML = "&#9654";
        let currentImg = 1;

        slideShowDiv.appendChild(previousSlideButton);
        slideShowDiv.appendChild(nextSlideButton);
        slideShowDiv.appendChild(slideImages);

        // add the images to the slide_images element
        for (let i = 0; i < imgCount; i++)
        {
            let image = document.createElement("img");
            image.src = images[i];
            slideImages.appendChild(image);
        }

        const showNextSlide = () => {
            let currentChild = slideImages.firstElementChild.cloneNode(true);
            slideImages.appendChild(currentChild);
            slideImages.removeChild(slideImages.firstElementChild);
            (currentImg < imgCount) ? currentImg++ : currentImg = 1;
        };

        const showPreviousSlide = () => {
            let currentChild = slideImages.lastElementChild.cloneNode(true);
            slideImages.removeChild(slideImages.lastElementChild);
            slideImages.insertBefore(currentChild, slideImages.firstElementChild);
            (currentImg > 1) ? currentImg-- : currentImg = imgCount;
        };

        previousSlideButton.onclick = showPreviousSlide;
        nextSlideButton.onclick = showNextSlide;
    }
}

    /* Desktop: Slideshow */
    #slideshow {
        max-width: 100%;
        position: relative;
        margin-bottom: 5em;
        top: 0;
    }

    #slide_images {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #previous_slide_button, #next_slide_button {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: black;
        font-weight: bold;
        font-size: 18px;
        z-index: 1;
    }

    #next_slide_button {
        right: 0;
    }

I dug into the chapter's files which I used so far for the slideshow and finally cracked the problem. Both my next and prev buttons were wrong and my CSS was also wrong. At least I've learned how to slideshow now.

Thx for the help!