How to insert 2-image slide (html)? [duplicate]

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

I am using this code in the header with an image, how can I insert another background image and make it change between 5 seconds?

    
asked by anonymous 07.02.2018 / 22:38

1 answer

1

You can use setInterval (permanent timer). Create two variables with the path of the images and go alternating 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">
    
07.02.2018 / 23:07
IPv4 only with PHP with ipv4 / ipv6 link Decision structure, how to know which one to use?