Super simple jQuery background-image random 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 top;
	background-size: cover;
	transition: background-image 1s linear;
}

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

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

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.js

/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
(function($) {
	
	'use strict';
	
	var $slides = $('[data-slides]');
	var images = $slides.data('slides');
	var count = images.length;
	var slideshow = function() {
		$slides
			.css('background-image', 'url("' + images[Math.floor(Math.random() * count)] + '")')
			.show(0, function() {
				setTimeout(slideshow, 5000);
			});
	};
	
	slideshow();
	
}(jQuery));

Super simple background image slideshow.min.js

/*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
!function(t){"use strict";var a=t("[data-slides]"),s=a.data("slides"),e=s.length,n=function(){a.css("background-image",'url("'+s[Math.floor(Math.random()*e)]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);

How can i adapt this to show images in order rather than random?

I have forked this and changed it to a version in which the images are one after the other (not random).

Thanks for doing that @ki11ua!

I created a fork of @ki11ua's fork which works perfectly and includes a nice image preload trick @ssbg-slideshow.js
@ki11ua's fork has an issue when 3 or more images are used and had to rewrite the javascript.

Aweeesome! Nice work @Ema4rl! Thanks for sharing. :)

I copied paste and made some changes but it didn't work.. I'm using CodeIgniter and referenced the image address using base_url()..

$slides.data('slides') return me an string.
So, images.length return "69".
I'm not able to parse items inside the attr data-slides :(

Is possible to add fade effect ?, Thanks for the code.

@inercianet just put transition css to the container

e.g. transition: all 2s ease-in-out;

@fr4nb I know this comment comes too late, but it might help someone else, you probably have a coma at the end of your array data-slides='[1,2,3,]' returns 8 the whole thing as a string, '[1,2,3]' returns 3 as an array.

How would you recommend adding slider dots to toggle through the images?