CODEWITHSUNDEEP
javascript
user2924431
user2924431

Reputation: 39

Manually advancing slideshow

I am new to programming and I am struggling with a slideshow on a website I am developing. I have created a slideshow that advances every 5 seconds, however I would like to allow the user to advance (or reverse) the show manually.

I have created a move forward button and I am using the onclick function. I have been able to make the onclick work for advancing the show by one picture, however once the new image appears the onclick doesn't work until the following image appears automatically 5 seconds later. Then onclick seems to work again. This is a continuous cycle.

i.e.: - 2nd image appears - click on right advance button and the 3rd image appears right away - click on 3rd image and nothing happens (advances to 4th image automatically after 5 seconds) - 4th image appears and I can click on right advance button and 5th image appears right away, but same issue where clicking on new image does nothing.

Here is my code: 

var myImage = document.getElementById("mainImage");
var navLeft = document.getElementById("navLeft");
var navRight = document.getElementById("navRight");

var imageArray = ["images/ss_img001.jpg","images/ss_img002.jpg","images/ss_img003.jpg","images/ss_img004.jpg",
                  "images/ss_img005.jpg","images/ss_img006.jpg","images/ss_img007.jpg","images/ss_img008.jpg"];
var imageIndex = 0;


navRight.onclick = function () {
    myImage.setAttribute("src",imageArray[imageIndex]);
    image++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

function changeImage() {
    myImage.setAttribute("src",imageArray[imageIndex]);
    imageIndex++;
    if (imageIndex >= imageArray.length) {
        imageIndex = 0;
    }
}

setInterval(changeImage,5000);

Upvotes: 1

Views: 69

Answers (1)

Delan Azabani
Delan Azabani

Reputation: 81492

The line

image++;

should be

imageIndex++;

To avoid further problems like this, instead of the onclick definition you can instead:

navRight.onclick = changeImage;

Upvotes: 1

Related Questions