如何摆脱轮播中的未定义索引

Question

I am working on developing an image carousel that looks something like the following:

I will go through and style everything correctly once I have all of the JavaScript and JQuery functioning properly so it won't display 100% like the picture below at it's present stage so don't worry about that. My current issue is that one of the smaller thumbnails is showing up as "undefined" under the img with id img3 and another under img1 when you click through the carousel. I know that the issue is from my index trying to call something at the end or at the beginning of my array that doesn't exist. How do I fix this in my JavaScript so that the first index in the array shows up rather than an index that doesn't exist?

I stripped out the irrelevant code below so you can see what I have so far:

HTML

<div id="carouselContainer">
<!--Add carousel and lightbox "view larger" button here-->
<img id="productImage" src="#">
<div id="viewLarger"></div>
<div id="carouselWrapper">
    <button id="prev">Prev</button>
    <div id="carousel">
        <img id="img1" src="#">
        <img id="img2" src="#">
        <img id="img3" src="#">
    </div>
    <button id="next">Next</button>
</div>
</div>

JavaScript

$.getJSON("item-data.json", function(results) {
        $.each(results.CatalogEntryView, function(index, item) {

            document.getElementById("productImage").src = item.Images[0].PrimaryImage[0].image;
            document.getElementById("img1").src = item.Images[0].AlternateImages[0].image;
            document.getElementById("img2").src = item.Images[0].AlternateImages[1].image;
            document.getElementById("img3").src = item.Images[0].AlternateImages[2].image;

        });

        //Map Array for Slideshow
     var slideShowArray = results.CatalogEntryView.map(item => item.Images.map(imgs =>[imgs.PrimaryImage[0].image, ...imgs.AlternateImages.map(alt => alt.image)]))[0][0];

        //Slideshow functions
            var num = 0
            function next() {
                var slider = document.getElementById("productImage");
                var carouselImg1 = document.getElementById("img1");
                var carouselImg2 = document.getElementById("img2");
                var carouselImg3 = document.getElementById("img3");
                num++
                if(num >= slideShowArray.length)
                    {num = 0}
                            productImage.src = slideShowArray[num];
                            img1.src = slideShowArray[num-1];
                            img2.src = slideShowArray[num];
                            img3.src = slideShowArray[num+1];
            }

            function prev() {
                var slider = document.getElementById("productImage");
                var carouselImg1 = document.getElementById("img1");
                var carouselImg2 = document.getElementById("img2");
                var carouselImg3 = document.getElementById("img3");
                num--;
                if(num < 0) {
                    num = slideShowArray.length-1;
                }
                productImage.src = slideShowArray[num];
                        img1.src = slideShowArray[num-1];
                        img2.src = slideShowArray[num];
                        img3.src = slideShowArray[num+1];
            }

        //Event Listeners
            document.getElementById("next").addEventListener("click", next)
            document.getElementById("prev").addEventListener("click", prev)

            });

CSS Placeholder Code to Shrink the Thumbnails

#img1, #img2, #img3 {
    height: 50px;
    width: 50px;
}

JSON

This fiddle will show you the relevant JSON data in item-data.json : https://jsfiddle.net/kdd1gppz/

Answer 1

if(num >= slideShowArray.length)
                {num = 0}
productImage.src = slideShowArray[num];
img1.src = slideShowArray[num-1];
img2.src = slideShowArray[num];
img3.src = slideShowArray[num+1];

And

if(num < 0) {
    num = slideShowArray.length-1;
}
productImage.src = slideShowArray[num];
img1.src = slideShowArray[num-1];
img2.src = slideShowArray[num];
img3.src = slideShowArray[num+1];

Problems are here. When n = 0, you try to read slideShowArray[-1] and when n = slideShowArray.length - 1, you try to read slideShowArray[slideShowArray.length] . Both doesn't exit, this is why you get undefined values. You have to bound num value between [0; slideShowArray.length - 1] [0; slideShowArray.length - 1] (ie : if n = -1 => n = slideShowArray.length - 1, if n = slideShowArray.length => n = 0)

Modulo operator should help you

[Solution]

Add a function :

function getIndex(num, offset, arrayLength) {
    // Add arrayLength prevents negative number test case
    return (num + arrayLength + offset) % arrayLength;
}

Remove your if statements.

When you do num++ / num-- , replace by num = getIndex(num, +/-1, slideShowArray.length)

When you tried to access to slideShowArray , replace direct access by slideShowArray[getIndex(num, +/-1, slideShowArray.length)]

The only strong limitation is to not start num to a negative value < slideShowArray.length

Answer 2

This worked. Created variables stepup and step down:

            var num = 0
            function next() {
                var slider = document.getElementById("productImage");
                var carouselImg1 = document.getElementById("img1");
                var carouselImg2 = document.getElementById("img2");
                var carouselImg3 = document.getElementById("img3");
//
                num++
                if(num >= slideShowArray.length)
                    {num = 0}

                var stepup = num + 1;
                var stepdown = num -1;

                if(stepup >= slideShowArray.length)
                    {stepup = 0}
                if(stepdown < 0)
                    {stepdown = slideShowArray.length-1}

                            productImage.src = slideShowArray[num];
                            img1.src = slideShowArray[stepdown];
                            img2.src = slideShowArray[num];
                            img3.src = slideShowArray[stepup];

            }

            function prev() {
                var slider = document.getElementById("productImage");
                var carouselImg1 = document.getElementById("img1");
                var carouselImg2 = document.getElementById("img2");
                var carouselImg3 = document.getElementById("img3");
                //
                num--;
                if(num < 0) {
                    num = slideShowArray.length-1;
                }

                var stepup = num + 1;
                var stepdown = num -1;

                if(stepup >= slideShowArray.length)
                    {stepup = 0}
                if(stepdown < 0)
                    {stepdown = slideShowArray.length-1}

                productImage.src = slideShowArray[num];
                        img1.src = slideShowArray[stepdown];
                        img2.src = slideShowArray[num];
                        img3.src = slideShowArray[stepup];

            }