How to insert 2 images slide (html)?

Question

<div id="home" style="background-image: url(assets/images/slider-1-background.jpg); width: 100%; height: 862px;" class="parallax hidden-xs">

I’m using this code in the header with an image, how can I insert another background image and make them keep changing within 5 seconds?

Answer 1

You can use setInterval (permanent timer). Create two variables with the path of the images and switch between the two:

var img_1 = true;
setInterval(function(){
   
   var img1 = "url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg)";
   var img2 = "url(https://image.freepik.com/fotos-gratis/hrc-tigre-siberiano-2-jpg_21253111.jpg)"
   var el = document.querySelector("#home");

   img_1 ? (img_1 = false, img_exibir = img2) : (img_1 = true, img_exibir = img1);
   
   el.style.backgroundImage = img_exibir;
}, 5000);

<div id="home" style="background-image: url(https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg); width: 100%; height: 862px;" class="parallax hidden-xs">