Home/ Questions/Q 8023169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:29:35+00:00

I’m trying to make a javascript slideshow that has a forward and back button.

  • 0

I’m trying to make a javascript slideshow that has a forward and back button. All I need are 8 images that I can click a button and either go to the next picture or previous. However, my code doesn’t work and I can’t figure out why. I assume it’s a simple fix but it’s late and I fee like I’ve tried everything. When I say it doesn’t work, I’m referring to that the browser either returns an error saying “unable to parse background-image” (only occurs when I remove if/then statements and only run the else part, without else in front of course) or it simply crashes, likely due to an endless loop when I try to run it with the if/then statements. Here is a jsfiddle link: http://jsfiddle.net/AZchy/. Thanks for your help!

Here is my javascript:

var images = new Array(8);
images[0] = "url('screen1.jpg')";
images[1] = "url('screen2.jpg')";
images[2] = "url('screen3.jpg')";
images[3] = "url('screen4.jpg')";
images[4] = "url('screen5.jpg')";
images[5] = "url('screen6.jpg')";
images[6] = "url('screen7.jpg')";
images[7] = "url('screen8.jpg')";
var i = 0;

function slideShowForward(){
        if(i=7){
            i = 0;
            document.getElementById("images").style.backgroundImage = images[i];
        }
        else{
            i++;
            document.getElementById("images").style.backgroundImage = images[i];
        }
}
function slideShowBack(){
        if(i=0){
            i=7;
            document.getElementById("images").style.backgroundImage = images[i];
        }
        else{
            i--;
            document.getElementById("images").style.backgroundImage = images[i];
        }
}

Here is my HTML

<body>
<div id="container">
<div id="images">
</div>
<div id="form">
<form name="buttons" action="">
    <input type="button" name="previous" value="Previous" onclick="slideShowBack()"/>
    <input type="button" name="next" value="Next" onclick="slideShowForward()"/>
</form>
</div>
</div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change if (i = 0) to if (i == 0). Same for if (i = 7) should be if ( i == 7).

    • 0