Background Image Simple Slideshow using CSS3 + jQuery Multiple from HTML5 data element with variable transition time + onload image.

biss.css

.img{
    height: 100%;
    background-image: url('img/content/slide1.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-transition: all 1.2s ease;
    -moz-transition: all 1.2s ease;
    -ms-transition: all 1.2s ease;
    -o-transition: all 1.2s ease;
    transition: all 1.2s ease;
}

biss.html

<div
	class="img"
	data-slides='[
		"img/content/slide1.jpg",
		"img/content/slide2.jpg",
		"img/content/slide3.jpg",
		"img/content/slide4.jpg",
		"img/content/slide5.jpg"
	]'
></div> 

biss.js

!function(t){
  "use strict";
  t("div[data-slides]").each(function(index){
    var jt=$(this), sl=jt.data("slides"), i=0,  max=6500, min = 4000, img;
    var  m=function(){
      if (!img)  img = document.createElement("img");
      img.onload=function(index){
        jt.css("background-image",'url("'+sl[i]+'")').show(0);
        if(i>=sl.length){i=0}
        else{i++};
        setTimeout(m,Math.floor(Math.random() * (max - min)) + min);
      };
      if(sl[i]) img.src=sl[i];
      else {i=0;m();}
    };
    m();
  });
}(jQuery);