I am changing my background image with the help of Java Script and I have both desktop version image and mobile version image.
When the screen size is reduced to below 600px, I want my desktop version images should be replaced with mobile version images.
Can someone help me on this and below is the code snippet.
const hbg = document.querySelector('.hbg');
const closeBtn = document.querySelector('.close');
hbg.addEventListener('click', ()=>{
document.querySelector('.nav').parentNode.classList.add('active');
})
closeBtn.addEventListener('click',()=>{
document.querySelector('.nav').parentNode.classList.remove('active');
})
const data = [
{
image: "images/desktop-image-hero-1.jpg",
header: "Discover innovative ways to decorate",
},
{
image: "images/desktop-image-hero-2.jpg",
header: "We are available all across the globe",
},
{
image: "images/desktop-image-hero-3.jpg",
header: "Manufactured with the best materials",
}
]
let currentPage = 0;
const slide = () => {
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const page = document.querySelector('.main-page');
const header = document.querySelector('.header');
const updateContent = () => {
page.style.backgroundImage = `url(${data[currentPage].image})`;
header.innerHTML = data[currentPage].header;
}
next.addEventListener('click', () => {
currentPage++;
if(currentPage > data.length-1){
currentPage = 0;
}
updateContent();
})
prev.addEventListener('click', () => {
currentPage--;
if(currentPage < 0 ){
currentPage = data.length - 1;
}
updateContent();
})
};
slide();
