To make an background images autoplay

I've been trying to make a slider with the functionality of hover on Icon the background images should be changed. I've achieved this thing but One more thing to be add-in this slider that the background images also should be autoplay.

I've made this slider in WordPress project using Elementor and made the custom Slider using javascript dom manipulation.

How can I achieve both things like first autoplay the background images and also when anyone hovers on the icon the background image also should be changed?

JavaScript code for running the functionality of on icon hover to change the background image.



<script>



const backgroundChange = document.querySelector('#hero-section');

const icon1 = document.querySelector('.icon-1');

icon1.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});

const icon2 = document.querySelector('.icon-2');

icon2.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});


const icon3 = document.querySelector('.icon-3');

icon3.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});

const icon4 = document.querySelector('.icon-4');

icon4.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});

const icon5 = document.querySelector('.icon-5');

icon5.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});

const icon6 = document.querySelector('.icon-6');

icon6.addEventListener('mouseover', function(){
backgroundChange.style.backgroundImage = 'url(

[To see links please register here]

)'
});


backgroundChange.style.autoPlay = 'true';





</script>

<style>
#hero-section{
transition: background 0.4s linear;
}





</style>