https://jsfiddle.net/0bt3hy29/6/
function chandgeBackgroundImageOnMouse() {
house.addEventListener("mouseover", ()=>{
bgImage.style.backgroundImage = home
is_paused = true
})
house.addEventListener("mouseout", ()=>{
is_paused = false
})
}
When you mouseover the "house" element and then mouseout it - everything is working as should. But if you will mouseover and mouseout very quickly - auto slider will be broken.
So, i see 2 choises.
To make react only after a gap of 3 seconds (it's mouseover and then mouseout - only after 3 seconds it can be mouseover one more time)
To make react only when picture was changed (it's mouseover, then mouseout - and only after picture was changed it can be mouseover one more time)
Your code is recursive with interval so its recursvevly creating new instances of many things. Instead, try this.
const car = "url('https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80')"
const home = "url('https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1175&q=80')"
const candles = "url('https://images.unsplash.com/photo-1593542468714-ac3ba4b38d43?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80')"
const data = [
car,
home,
candles,
]
const house = document.querySelector('#house')
const avto = document.querySelector('#avto')
const bgImage = document.querySelector('.img-of-dog')
let current = 0;
function intervalMethod(){
bgImage.style.backgroundImage = data[current]
current = ++current % data.length
}
let changeTimeset = setInterval(()=>{
intervalMethod();
}, 2000)
house.addEventListener("mouseover", ()=>{
clearInterval(changeTimeset);
bgImage.style.backgroundImage = home
})
house.addEventListener("mouseout", ()=>{
changeTimeset = setInterval(()=>{
intervalMethod();
}, 2000)
})