Javascript simple image slider

Question

I would like to have a simple picture slider. That slider should be in the header of the website and should switch between a small delay. I want it simple and named the pictures 1.jpg, 2.jpg and so on and they are in the folder "bilder".

I have tried a bit and here is my result:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">

    function picture_slider(){
        setInterval( switch_picture(), 3000 );
        return false;
    }

    function switch_picture() {
        for ( var i = 1; i < 7 ; i++ ) {     
            var pfad = "bilder/" + i + ".jpg";
            document.getElementById("bild").src = pfad; 

            i++;
        };
        return false;
    }
</script>
</head>
<body onload="picture_slider();">
    <img id="bild" src="" />
</body>
</html>

I guess, that I did something wrong, because my browser is showing only one picture and is not switching.

Roko C. Buljan · Accepted Answer · 2015-02-19 19:13:00Z

2

jsBin demo

On every loop you're iterating (for loop) over all your images, resulting in the latest one. Also use only switch_picture (instead of switch_picture()).

_{P.S: create an 0.jpg image for this counter:}

function picture_slider(){
    setInterval( switch_picture, 2000 ); // corrected removing "()"
}

var bild = document.getElementById("bild")
var i = 0; // Start from image 0.jpg

function switch_picture() { // don't iterate a loop in here!
  bild.src = "bilder/"+ (i++ % 7) +".jpg";
}

edited Feb 19, 2015 at 19:13

answered Feb 19, 2015 at 19:07

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

3 Comments

c00L Over a year ago

The browser is showing only picture "0" now. He is not going on to the next picture.

c00L Over a year ago

Sorry, for answering so late I went to the market. If I do this, I will get this error: "Uncaught TypeError: Cannot set property 'src' of nulltest_2.html:16 switch_picture"

Roko C. Buljan Over a year ago

@c00L look I've posted you the exact code sample you need to use and also a workign demo to see how to use it. Should be easy to setup 7 lines of JS.

c00L · Accepted Answer · 2015-02-19 20:40:53Z

0

I found something here: Stackoverflow Link

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">

var i = 0;


var images = [ "1", "2", "3", "4", "5", "6", "7"]

function picture_slider(){
    setInterval( switch_picture, 2000 );
}

function switch_picture() {

    i++;

    if ( i >= images.length ) {

        i = 0;
    };

    var bild = document.getElementById("bild");
    bild.src = "bilder/" + images[i] + ".jpg"; 

}

</script>
</head>
<body onload="picture_slider();">
<img id="bild" src="" />
</body>
</html>

answered Feb 19, 2015 at 20:40

c00L

6091 gold badge6 silver badges17 bronze badges

Comments

nurmdrafi · Accepted Answer · 2022-04-06 09:00:28Z

// 1. images need to store in an Array
const images = [
  "img/pic-1.jpg",
  "img/pic-2.jpg",
  "img/pic-3.jpg",
  "img/pic-4.jpg",
  "img/pic-5.jpg",
  "img/pic-6.jpg",
  "img/pic-7.jpg"
];

// 7. getElementById by calling, store globally (do not call inside loop/setInterval performance will loose)
const imgElement= document.getElementById("slider-image");

// 2. set initial value for array index
let imgIndex = 0;

// 3. create setInterval()
const sliderInterval = setInterval(() => {
  // 6. check condition if length is finished then start again from 0
  if (imgIndex >= images.length) { // use >= because index start from 0 and length start from 1, if use just > then last element will be undefined
    imgIndex = 0;
  }
  // 5. testing
  // console.log(imgIndex);

  // 9. Dynamically change image src
  const imgUrl = images[imgIndex];
  imgElement.setAttribute('src', imgUrl);
  // 4. increase value by 1
  imgIndex++;
}, 1000);

Collectives™ on Stack Overflow

Javascript simple image slider

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related