Slide Background Image

Question

have 3 images using JavaScript am making them to slide from left to right for the body background of html but the images are just appearing is there any thing i have to do so that they smoothly slide.

FYI: I have added a div to Preview.

Hear is the JSFiddle

 var bgArr = [ "http://foxarc.com/en/cfxs/images/masks.jpg", "http://foxarc.com/en/cfxs/images/brushes.jpg", "http://foxarc.com/en/cfxs/images/text.jpg" ]; var i = 0; // Start the slide show setInterval(function() { $("#demo").css("background-image", "url(" + bgArr[i] + ")"); (i < bgArr.length - 1) ? i++ : i = 0 }, 2000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="demo" style="text-align:center; width:90%; height:310px; overflow:hidden; border-style:dashed; border-width:1px;"> <p style="margin-top:83px;"></p> </div> 

Answer 1

See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/1/ with animate()

without animate() : https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/2/

What is .animate()

See this example https://jsfiddle.net/kevalbhatt18/0Lr9uvt0/5/ in this example i use jquery ui for left right effect

 $('.test').css({ 'background-image': "url('" + bgArr[i] + "')" }); (i < bgArr.length - 1) ? i++ : i = 0 }, 2000); 

And apply css

 .test{ -webkit-transition: background-image 0.2s ease-in-out; transition: background-image 0.2s ease-in-out; } 

Answer 2

I think the best solution is to create 2 div s inside of body

<div class="background-1"></div>
<div class="background-2"></div>

and put them under it

body {
    position: relative;
    background: transparent;
    overflow-x: hidden;
}
.background-1, .background-2 {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

Then create a custom slider

$(document).ready(function(){
    var bgArr = ["http://foxarc.com/en/cfxs/images/masks.jpg",
                 "http://foxarc.com/en/cfxs/images/brushes.jpg",
                 "http://foxarc.com/en/cfxs/images/text.jpg"]; 

    var i = 0;

    var $bg1 = $('.background-1').css('background-image', 'url('+bgArr[0]+')')
                                 .css('left', '0%');
    var $bg2 = $('.background-2').css('background-image', 'url('+bgArr[1]+')')
                                 .css('left', '-100%');

    var bgSlide = function($bg) {
        $bg.animate({ left: '+=100%' }, 600, function(){ 
            if(parseInt($bg.css('left')) > 0) {
                $bg.css('left', '-100%');
                (i < bgArr.length-1) ? i++ : i=0;
                $bg.css("background-image", "url("+bgArr[i]+")");
            }                           
        } );
    }

    setInterval(function() {                
        bgSlide($bg1);
        bgSlide($bg2);                          
    }, 2000);
});

Example: jsfiddle