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](https://jsfiddle.net/nkc3ebpy/#&togetherjs=38Bmm0beQ7)

```js
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);
```

```html
<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>
```