Having created a slider with hover functionality on icons to change background images, I now seek to add an autoplay feature to the slider. The slider was implemented in a WordPress project using Elementor and involved custom Slider creation through JavaScript DOM manipulation.
How can I achieve simultaneous autoplay of background images along with changing them upon hovering over the icon?
Here is the JavaScript code responsible for changing the background image when an icon is hovered:
<script>
const backgroundChange = document.querySelector('#hero-section');
const icons = document.querySelectorAll('.icon');
icons.forEach(icon => {
icon.addEventListener('mouseover', function(){
const imageUrl = this.getAttribute('data-image');
backgroundChange.style.backgroundImage = `url(${imageUrl})`;
});
});
backgroundChange.style.autoPlay = 'true';
</script>
<style>
#hero-section{
transition: background 0.4s linear;
}
</style>