Reset variable when cycling through index of a Javascript array

Question

I'm trying to create a background image 'slider' using javascript/ jQuery. The idea is to click an anchor and move through the images forward or backward respectively. I have my file names in an array called 'images.'

It works, except I can't figure how to revery form the last image back to the first and vise versa. In my console its throwing a variable undefined. Here is my code:

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
    if ( i > arrayLength ) {
      $('#image').css("background-image", "url(img/" + images[0] + ")");
      i = 0;
      return;
    }
    console.log(i);
}

$('#prev').click(function(){
    i--;
    currentImage(i);
});
$('#next').click(function(){
    i++;
    currentImage(i);
});

I've tried using "if (i = undefined) {i=0; console.log("works");}" and "if (i > arrayLength) {i=0; console.log("works");}" both methods resulted in a successful console log, but neither method seems to reset i.

I can't seem to find a similar thread on SO, but maybe I'm searching the wrong things. Any help, or a point in the right direction would be great. Thanks!

Hope this helps - jsfiddle.net/2fqpbg0w

Developer
– Developer

2017-01-14 05:38:30 +00:00
Commented Jan 14, 2017 at 5:38 — Developer
– Developer, Commented Jan 14, 2017 at 5:38

ibrahim mahrir · Accepted Answer · 2017-01-14 05:41:20Z

1

Check i before passing it to currentImage

var i = 0;
var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    $('#image').css("background-image", "url(img/" + images[i] + ")");
}

$('#prev').click(function(){
    i--;
    if(i < 0) i = arrayLength;
    currentImage(i);
});

$('#next').click(function(){
    i++;
    if(i > arrayLength) i = 0;
    currentImage(i);
});

answered Jan 14, 2017 at 5:41

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

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

1 Comment

swollenboy Over a year ago

I see how this works now. Thanks so much for the answer!

A. L · Accepted Answer · 2017-01-14 05:34:48Z

0

For forward you can use a modulus instead

i = (i+1) % images.length

This will always return something in the array

For backwards, simply check if it goes into negative, if it does, then go to max

if (i < 0)
{
    i = arrayLength ;
}

answered Jan 14, 2017 at 5:34

A. L

12.7k29 gold badges100 silver badges179 bronze badges

Comments

ibrahim mahrir · Accepted Answer · 2017-01-14 05:48:09Z

0

var i = 0, images=["q","w","e","r","t","y"];

var arrayLength = images.length - 1;
currentImage(0); //show the first photo initially

function currentImage(i) {
    if(i < 0) i = arrayLength;
    if(i > arrayLength) i = 0;
    
    alert(images[i]); //replace this with logic for setting image
}

$('#prev').click(function(){
    i--;
    currentImage(i);
});
$('#next').click(function(){
    i++;
    currentImage(i);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<input type="button" value="previous" id="prev">
<input type="button" value="next" id="next">

edited Jan 14, 2017 at 5:48

ibrahim mahrir

31.8k5 gold badges50 silver badges78 bronze badges

answered Jan 14, 2017 at 5:40

Developer

6,4703 gold badges21 silver badges24 bronze badges

Comments

Dexter Bengil · Accepted Answer · 2017-01-16 02:10:39Z

0

In your $('#prev') and $('#next') click functions, check your images first if there is an item at the index of [i] with that before doing the iteration. For example:

$('#prev').click(function(){
   if(images[i-1] != undefined){
      i--;
      currentImage(i);
   }else{
      // do the reset here, or if you want you can show the last image in an array
      currentImage(images.length);
   }
});

The same goes for the $("#next").click function, check the images[i+1] first before you iterate i variable.

edited Jan 16, 2017 at 2:10

answered Jan 14, 2017 at 5:36

Dexter Bengil

6,7157 gold badges39 silver badges57 bronze badges

Collectives™ on Stack Overflow

Reset variable when cycling through index of a Javascript array

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related