Skip to content

Instantly share code, notes, and snippets.

@mhulse

mhulse/Super simple background image slideshow.css

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.
Download ZIP

Revisions

  1. mhulse revised this gist Jul 1, 2015. 2 changed files with 2 additions and 0 deletions.
    1 change: 1 addition & 0 deletions Super simple background image slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    /*! slides | https://gist.github.com/mhulse/66bcbb7099bb4beae530 */
    (function($) {

    'use strict';
    1 change: 1 addition & 0 deletions Super simple background image slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,2 @@
    /*! 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);
  2. mhulse revised this gist Jul 1, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Super simple background image slideshow.css
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: background 1s linear;
    transition: background-image 1s linear;
    }

    /* Use additional CSS to control the `height` of `[data-slides]`, like so: */
  3. mhulse created this gist Jul 1, 2015.
    14 changes: 14 additions & 0 deletions Super simple background image slideshow.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    [data-slides] {
    background-image: url(../../uploads/banner1.jpg); /* Default image. */
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    transition: background 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; }
    }
    14 changes: 14 additions & 0 deletions Super simple background image slideshow.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <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 -->
    18 changes: 18 additions & 0 deletions Super simple background image slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    (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));
    1 change: 1 addition & 0 deletions Super simple background image slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    !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);