Super simple jQuery background-image serial slideshow (using CSS3 for the transition and gets the image paths via HTML5 `data` attribute).

Super simple background image slideshow.css

[data-slides] {
	background-image: url(../../uploads/banner1.jpg); /* Default image. */
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-ms-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

/* Use additional CSS to control the `height` of `[data-slides]`, like so: */

.test { height: 300px; }
@media all and (min-width: 48em) {
	.test { height: 400px; }
}

Super simple background image slideshow.html

<div
	class="test"
	data-slides='[
		"uploads/banner1.jpg",
		"uploads/banner2.jpg",
		"uploads/banner3.jpg",
		"uploads/banner4.jpg",
		"uploads/banner5.jpg",
		"uploads/banner6.jpg",
		"uploads/banner7.jpg",
		"uploads/banner8.jpg",
		"uploads/banner9.jpg"
	]'
> … </div> <!-- /.primary -->

Super simple background image slideshow.min.js

!function(t){"use strict";var a=t("[data-slides]"),ni=0,s=a.data("slides"),e=s.length,n=function(){if(ni>=a.length){ni=0}else{ni++};a.css("background-image",'url("'+s[ni]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);

Hi, I tried it and I think it has some problem. Sometimes it keeps repeating 2 images rather than all of them.
Any suggestion?

using two data-slides on the same page? Thank you.

@rameez-nmedia, I created a fork which solves the issue and includes a nice image preload trick @ssbg-slideshow.js
I also had the issue with 3 or more images and had to rewrite the javascript.