Last active
January 18, 2020 12:46
-
-
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).
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[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; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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 --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! 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); |
@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?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@inercianet just put transition css to the container
e.g. transition: all 2s ease-in-out;