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

You can automatically load this plugin with: $O.test('[data-slides]').js('ssbg-slideshow.min.js'); using Only.js!

For some reason this is only animating in Chome and Safari. No Firefox, IE, or Edge. Is there something I'm missing?

This error is showing. what to do now

Uncaught TypeError: Cannot read property 'length' of null .