CODEWITHSUNDEEP
javascripthtmlcss
kodder360
kodder360

Reputation: 99

how to carousel GIF in background using JavaScript?

I am having difficulty to carousal gif in body background using javascript. I have set background in css body and set a variable in root in style.css to access this variable in javascript. This way is not working. my javascript code is perfect but I unable to change url in style.css. Can anyone help me please? Thanks

 var index=0;
     var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array
     var totalImages = images.length;
     function slideImages(){
       document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index
       
        if(index<totalImages-1){ 
            index++;
        }
        else
        {
            index=0;
        }
    
        setTimeout(slideImages,250)
     }
     window.onload = slideImages;
 :root {
      --bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);
    }
    
    body {
      font-family: 'Montserrat', sans-serif;
      min-height: 100vh;
      max-height: 100vh;
      margin: 0;
      color: #fff;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      background: var(--bg-change-gif);
      background-size: cover;
      height: 100%;
      overflow: hidden;
      
    }

Upvotes: 0

Views: 268

Answers (1)

GAURAV KUMAR JHA
GAURAV KUMAR JHA

Reputation: 190

Your code has a bit of error here:

document.documentElement.style.setProperty('--bg-change-gif',url(images[index]));// get images by specific index

It will throw an error saying url is not defined. You should change it to this:

document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index

Here is your updated snippet!

var index=0;
 var images = ['https://media.giphy.com/media/BHNfhgU63qrks/source.gif','https://media.giphy.com/media/l3q2LucQ5TmyO7dFS/source.gif','https://media.giphy.com/media/l0O9xcDNUrPMfYQAE/source.gif','https://media.giphy.com/media/xUOxeWFk7gEwF13wDS/source.gif','https://media.giphy.com/media/BTWsSlrSHGNTa/source.gif','https://media.giphy.com/media/3gWENmQ8qo896QNhPV/source.gif']; //get all the images and saved them into an array
 var totalImages = images.length;
 function slideImages(){
   document.documentElement.style.setProperty('--bg-change-gif','url('+images[index]+')');// get images by specific index
   
    if(index<totalImages-1){ 
        index++;
    }
    else
    {
        index=0;
    }

    setTimeout(slideImages,250)
 }
 window.onload = slideImages;
:root {
  --bg-change-gif:url(https://media.giphy.com/media/EfcqFUzY6asdq/source.gif);
}

body {
  font-family: 'Montserrat', sans-serif;
  min-height: 100vh;
  max-height: 100vh;
  margin: 0;
  color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  background: var(--bg-change-gif);
  background-size: cover;
  height: 100%;
  overflow: hidden;
  
}

Upvotes: 1

Related Questions