Super Simple jQuery Background-image Slideshow (using CSS3 for the transition, gets the image paths via HTML5 `data` attribute, and with image preload trick).

ssbg-slideshow.js

/*!
 * By Eharry.me (https://gist.github.com/Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe)
 */
 ! function ($) {
    "use strict";
    var slide = $("[data-slides]"),
        count = 0,
        slides = slide.data("slides"),
        len = slides.length,
        n = function () {
            if (count >= len) {
                count = 0
            }
            slide.css("background-image", 'url("' + slides[count] + '")').show(0, function () {
                setTimeout(n, 5e3)
            });
            count++;
        };
    n()
}(jQuery);

ssbg-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; }
}

/* additional CSS for hidden image preload section */
[hidden] { display: none; }

ssbg-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 -->

<!-- image preload (not compulsory) -->
<div hidden>
	<img src="uploads/banner1.jpg">
	<img src="uploads/banner2.jpg">
	<img src="uploads/banner3.jpg">
	<img src="uploads/banner4.jpg">
	<img src="uploads/banner5.jpg">
	<img src="uploads/banner6.jpg">
	<img src="uploads/banner7.jpg">
	<img src="uploads/banner8.jpg">
	<img src="uploads/banner9.jpg">
</div> <!-- /.image preload -->

ssbg-slideshow.min.js

/*!
 * By Eharry.me (https://gist.github.com/Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe)
 */
 !function(a){"use strict";var b=a("[data-slides]"),c=0,d=b.data("slides"),e=d.length,f=function(){c>=e&&(c=0),b.css("background-image",'url("'+d[c]+'")').show(0,function(){setTimeout(f,5e3)}),c++};f()}(jQuery);