Smooth Sliding background image

Question

I am having a PhP page where i would like to set the background image as follows.

body id="indexbody" background="<?php echo base_url(); ?>images/Images03.png" 
style="background-repeat:no-repeat;background-size:cover;position: relative;
background-size:100% 100vh;"

Now, this shows the background image well. I want the background image to smoothly keep fading in and out one after the other.

<script>
window.onload = function() {
var images = [
  "http://images/Images01.png",
  "http://images/Images02.png",
  "http://images/Images03.png"
]
var imageHead = document.getElementById("indexbody");

var i = 0;
$('#indexbody').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + images[i] + ')');
i = i + 1;
      if (i == images.length) {
        i =  0;
      }
}).delay(1000).fadeTo('slow', 1);
</script>

This is not working. Can anyone suggest how to accomplish this. Either fadein fadeout or left to right sliding

Answer 1

mind using plugin?

this plugin worked for me