How to loop through array of images in javascript

Question

I have an Image carousel that contains three images. I have next and previous buttons to click through the array of images, but I would like it to go back to the first image when clicking 'next' on the last image in the array (and to the last one when clicking 'previous' on the first image). Is there a way I can use a loop to make this work?

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var currentImg = 0;

document.querySelector('.carousel>img').src = 'images/' + images[0];

document.querySelector('.carousel').addEventListener('click', function (evt){
var target = evt.target;
if (target.classList.contains('control')) {

    if (target.classList.contains('next')) {
    //move to the next index in the array 
        currentImg += 1;

    } else if (target.classList.contains('prev')){
    // move to the previous index in the array
        currentImg -= 1;
    } 
    // display the new current image
    document.querySelector('.carousel>img').src = 'images/'
        + images[currentImg];
    }
});

I was able to do the following and it did what I wanted:

    if (target.classList.contains('next')) {
       if(currentImg==2){
           currentImg=0
      } else {
        currentImg += 1;
      }

    } else if (target.classList.contains('prev')){
       if(currentimg==0){
           currentimg=2
      } else { 
        currentImg -= 1;
    }

Thank you for all the other suggestions I will look into those as well!

Welcome to Stack Overflow! What would help would be some HTML code... it would just be easier for us users to answer your question :). — Luke
– Luke, Commented Mar 2, 2016 at 21:04

RobG · Accepted Answer · 2016-03-02 21:13:17Z

1

Since you want to go both ways (+ and -), consider:

var fac = target.classList.contains('next')? 1 : -1;
currentImage = (currentImage + fac + images.length) % images.length;

so if currentImage reaches images.length it wraps to the first image and if it goes to -1, it "wraps" to imaages.length - 1, i.e. the last image.

answered Mar 2, 2016 at 21:13

RobG

148k32 gold badges180 silver badges216 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Arif Burhan · Accepted Answer · 2016-03-02 21:06:23Z

0

++currentImg % 3

--currentImg % 3

If needed replace 3 with whatever the size of the Array.

answered Mar 2, 2016 at 21:06

Arif Burhan

5054 silver badges12 bronze badges

7 Comments

Arif Burhan Over a year ago

Or use images.length in place of 3 to make you code future proof.

Arif Burhan Over a year ago

@RobG I think javascript and php replace negative indexes with length-index , or count from other end.

Cosmin Ababei Over a year ago

@ArifBurhan nope, they don't.

RobG Over a year ago

@ArifBurhan— currentImage is just a number, it has no special properties.

Arif Burhan Over a year ago

@RobG also true in ruby : h3manth.com/new/blog/2013/negative-array-index-in-javascript

|

Cosmin Ababei · Accepted Answer · 2016-03-02 21:12:04Z

0

Add this piece of code after you've either incremented or decremented currentImg and you should be fine:

if (currentImg < 0) { 
  currentImg = images.length - 1;
} else if (currentImg >= images.length) {
  currentImg = 0;
}

This checks to see if currentImg has "escaped" the images array boundaries.

edited Mar 2, 2016 at 21:12

answered Mar 2, 2016 at 21:05

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

1 Comment

Arif Burhan Over a year ago

or could use ternary operator here.

Collectives™ on Stack Overflow

How to loop through array of images in javascript

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related