Skip to content

Instantly share code, notes, and snippets.

@mhulse
Last active January 18, 2020 12:46
Show Gist options
  • Save mhulse/66bcbb7099bb4beae530 to your computer and use it in GitHub Desktop.
Save mhulse/66bcbb7099bb4beae530 to your computer and use it in GitHub Desktop.
Super simple jQuery background-image random slideshow (using CSS3 for the transition and gets the image paths via HTML5 `data` attribute).
[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; }
}
<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 -->
/*! 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));
/*! 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);
@ludioao
Copy link

ludioao commented May 15, 2018

@inercianet just put transition css to the container

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

@RyuuzakiJulio
Copy link

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

@tone4407
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment