Home The images of my slider are not displayed since I changed (body) to (getElementById('SLIDE_BG'))

Questions

The images of my slider are not displayed since I changed (body) to (getElementById('SLIDE_BG'))

November 12, 2022

let i = 0;
let images = [];
let slideTime = 3000; // 3 seconds
 

images[0] = 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fecosigna.com%2Fdesign-produit%2F&psig=AOvVaw3k3ZipL27zVInxwZprWIw6&ust=1668355686044000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCJjA87ODqfsCFQAAAAAdAAAAABAD';
images[1] = 'https://www.notreloft.com/images/2013/09/Ball-Chair-800x600.jpg';
images[2] = 'https://www.designferia.com/sites/default/files/field/image/objet-design-maison-vase-eau.jpg';

function changePicture() {
    // here I changed the (body) tag to (getElementById()) so that the slider only takes the id
    document.getElementById('SLIDE_BG').style.backgroundImage = images[i];
    if (i < images.length - 1) {
        i++;
    } else {
        i = 0;
    }
    setTimeout("changePicture()", slideTime);
}

window.onload = changePicture;

#SLIDE_BG {
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-size: cover;
    background-image: url(https://th.bing.com/th/id/R.09cc86ad79fe8b33afdee0997c54fd71?rik=pO8HFJ%2bVr5DEYQ&pid=ImgRaw&r=0);
    }

<div id="SLIDE_BG"></div>

>Solution :

You are missing url()

document.getElementById('SLIDE_BG').style.backgroundImage = `url(${images[i]})`;

Also the first image in the array is not an image

I made a few other changes

let i = 0;
let images = [];
let slideTime = 3000; // 3 seconds


images[0] = 'https://ecosigna.com/wp-content/uploads/2021/01/visuel-de-design-produit-sketch-format-1200x800-1.jpg';
images[1] = 'https://www.notreloft.com/images/2013/09/Ball-Chair-800x600.jpg';
images[2] = 'https://www.designferia.com/sites/default/files/field/image/objet-design-maison-vase-eau.jpg';

function changePicture() {
  document.getElementById('SLIDE_BG').style.backgroundImage = `url(${images[i]})`;
  i++;
  if (i >= images.length) i = 0;
}

window.addEventListener("DOMContentLoaded", function() {
  setInterval(changePicture, slideTime);
})

#SLIDE_BG {
  height: 100vh;
  width: 100vw;
  background-position: center;
  background-size: cover;
  background-image: url(https://th.bing.com/th/id/R.09cc86ad79fe8b33afdee0997c54fd71?rik=pO8HFJ%2bVr5DEYQ&pid=ImgRaw&r=0);
}