Can you edit the js code so it loads the images from an img folder and not from a url? Existing code:
Can you edit the js code so it loads the images from an img folder and not from a url?
Existing code:
const banner = document.querySelector('.banner');
const next = document.querySelector('.next');
const previous = document.querySelector('.previous');
const images = ["https://www.atptour.com/-/media/images/news/2021/03/29/18/32/rublev-miami-2021-monday.jpg", "https://s01.sgp1.cdn.digitaloceanspaces.com/article/107396-ogbtkhkanf-1544032372.jpg", "https://gtimg.tokyo2020.org/image/private/t_article-image-desktop/production/idzjypnjzqaor1htmnyi", "https://static01.nyt.com/images/2020/12/20/sports/20nba-stein-1/20nba-stein-1-superJumbo-v2.jpg"];
function setBackgroundImage(elementToSetOn, url) {
elementToSetOn.style.backgroundImage = `url(${url})`;
elementToSetOn.style.backgroundSize = "cover";
}
let imageNumber = 0;
banner.style.background = setBackgroundImage(banner, images[imageNumber]);
next.addEventListener('click', () => {
if(imageNumber < images.length - 1) {
imageNumber++;
setBackgroundImage(banner, images[imageNumber]);
} else {
imageNumber = 0;
setBackgroundImage(banner, images[0]);
}
})
previous.addEventListener('click', () => {
if(imageNumber > 0) {
--imageNumber;
setBackgroundImage(banner, images[imageNumber]);
} else {
imageNumber = images.length - 1;
setBackgroundImage(banner, images[imageNumber]);
}
})
Step by step
Solved in 3 steps
