Forked from mhulse/Super simple background image slideshow.css
Last active
November 29, 2018 18:53
-
-
Save ki11ua/24852452272065fb5a00bab9eda5af27 to your computer and use it in GitHub Desktop.
Super simple jQuery background-image serial slideshow (using CSS3 for the transition and gets the image paths via HTML5 `data` attribute).
This file contains hidden or 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 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; } | |
| } |
This file contains hidden or 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 hidden or 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
| !function(t){"use strict";var a=t("[data-slides]"),ni=0,s=a.data("slides"),e=s.length,n=function(){if(ni>=a.length){ni=0}else{ni++};a.css("background-image",'url("'+s[ni]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@rameez-nmedia, I created a fork which solves the issue and includes a nice image preload trick @ssbg-slideshow.js
I also had the issue with 3 or more images and had to rewrite the javascript.