Skip to content

Instantly share code, notes, and snippets.

@Ema4rl

Ema4rl/ ssbg-slideshow.js

Forked from ki11ua/Super simple background image slideshow.css
Last active January 18, 2020 18:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Ema4rl revised this gist Aug 27, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ssbg-slideshow.html
    View file
    Original file line number Diff line number Diff line change
    @@ -12,6 +12,7 @@
    "uploads/banner9.jpg"
    ]'
    > … </div> <!-- /.primary -->

    <!-- image preload (not compulsory) -->
    <div hidden>
    <img src="uploads/banner1.jpg">
  2. Ema4rl revised this gist Aug 27, 2016. 2 changed files with 17 additions and 2 deletions.
    5 changes: 4 additions & 1 deletion ssbg-slideshow.css
    View file
    Original file line number Diff line number Diff line change
    @@ -15,4 +15,7 @@
    .test { height: 300px; }
    @media all and (min-width: 48em) {
    .test { height: 400px; }
    }
    }

    /* additional CSS for hidden image preload section */
    [hidden] { display: none; }
    14 changes: 13 additions & 1 deletion ssbg-slideshow.html
    View file
    Original file line number Diff line number Diff line change
    @@ -11,4 +11,16 @@
    "uploads/banner8.jpg",
    "uploads/banner9.jpg"
    ]'
    > … </div> <!-- /.primary -->
    > … </div> <!-- /.primary -->
    <!-- image preload (not compulsory) -->
    <div hidden>
    <img src="uploads/banner1.jpg">
    <img src="uploads/banner2.jpg">
    <img src="uploads/banner3.jpg">
    <img src="uploads/banner4.jpg">
    <img src="uploads/banner5.jpg">
    <img src="uploads/banner6.jpg">
    <img src="uploads/banner7.jpg">
    <img src="uploads/banner8.jpg">
    <img src="uploads/banner9.jpg">
    </div> <!-- /.image preload -->
  3. Ema4rl renamed this gist Aug 27, 2016. 1 changed file with 0 additions and 0 deletions.
    0 SSbg-slideshow.js → ssbg-slideshow.js
    View file
    File renamed without changes.
  4. Ema4rl revised this gist Aug 27, 2016. No changes.
  5. Ema4rl renamed this gist Aug 27, 2016. 1 changed file with 0 additions and 0 deletions.
    0 ssbg-slideshow.js → SSbg-slideshow.js
    View file
    File renamed without changes.
  6. Ema4rl revised this gist Aug 25, 2016. 2 changed files with 8 additions and 2 deletions.
    5 changes: 4 additions & 1 deletion ssbg-slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,7 @@
    ! function ($) {
    /*!
    * By Eharry.me (https://gist.github.com/Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe)
    */
    ! function ($) {
    "use strict";
    var slide = $("[data-slides]"),
    count = 0,
    5 changes: 4 additions & 1 deletion ssbg-slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1,4 @@
    !function(a){"use strict";var b=a("[data-slides]"),c=0,d=b.data("slides"),e=d.length,f=function(){c>=e&&(c=0),b.css("background-image",'url("'+d[c]+'")').show(0,function(){setTimeout(f,5e3)}),c++};f()}(jQuery);
    /*!
    * By Eharry.me (https://gist.github.com/Ema4rl/b8ef90be99205ddada5ef2cd6e632ebe)
    */
    !function(a){"use strict";var b=a("[data-slides]"),c=0,d=b.data("slides"),e=d.length,f=function(){c>=e&&(c=0),b.css("background-image",'url("'+d[c]+'")').show(0,function(){setTimeout(f,5e3)}),c++};f()}(jQuery);
  7. Ema4rl revised this gist Aug 25, 2016. No changes.
  8. Ema4rl revised this gist Aug 25, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions ssbg-slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    !function(a){"use strict";var b=a("[data-slides]"),c=0,d=b.data("slides"),e=d.length,f=function(){c>=e&&(c=0),b.css("background-image",'url("'+d[c]+'")').show(0,function(){setTimeout(f,5e3)}),c++};f()}(jQuery);
  9. Ema4rl revised this gist Aug 25, 2016. 3 changed files with 0 additions and 2 deletions.
    0 Super simple background image slideshow.css → ssbg-slideshow.css
    View file
    File renamed without changes.
    0 Super simple background image slideshow.html → ssbg-slideshow.html
    View file
    File renamed without changes.
    2 changes: 0 additions & 2 deletions ssbg-slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,15 +5,13 @@
    slides = slide.data("slides"),
    len = slides.length,
    n = function () {
    console.log('before', count, len);
    if (count >= len) {
    count = 0
    }
    slide.css("background-image", 'url("' + slides[count] + '")').show(0, function () {
    setTimeout(n, 5e3)
    });
    count++;
    console.log('after', count, len);
    };
    n()
    }(jQuery);
  10. Ema4rl revised this gist Aug 25, 2016. 2 changed files with 19 additions and 1 deletion.
    1 change: 0 additions & 1 deletion Super simple background image slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    !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);
    19 changes: 19 additions & 0 deletions ssbg-slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,19 @@
    ! function ($) {
    "use strict";
    var slide = $("[data-slides]"),
    count = 0,
    slides = slide.data("slides"),
    len = slides.length,
    n = function () {
    console.log('before', count, len);
    if (count >= len) {
    count = 0
    }
    slide.css("background-image", 'url("' + slides[count] + '")').show(0, function () {
    setTimeout(n, 5e3)
    });
    count++;
    console.log('after', count, len);
    };
    n()
    }(jQuery);
  11. @ki11ua ki11ua revised this gist Apr 2, 2016. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Super simple background image slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    !function(t){"use strict";var a=t("[data-slides]"),ni=0,s=a.data("slides"),e=s.length,n=function(){console.log(ni, s[ni]);if(ni>=a.length){ni=0}else{ni++};a.css("background-image",'url("'+s[ni]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);
    !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);
  12. @ki11ua ki11ua revised this gist Apr 2, 2016. 1 changed file with 8 additions and 4 deletions.
    12 changes: 8 additions & 4 deletions Super simple background image slideshow.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,18 @@
    [data-slides] {
    background-image: url(../../uploads/banner1.jpg); /* Default image. */
    background-repeat: no-repeat;
    background-position: center top;
    background-position: center center;
    background-size: cover;
    transition: background-image 1s linear;
    -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: 220px; }
    .test { height: 300px; }
    @media all and (min-width: 48em) {
    .test { height: 320px; }
    .test { height: 400px; }
    }
  13. @ki11ua ki11ua revised this gist Apr 2, 2016. 2 changed files with 1 addition and 21 deletions.
    19 changes: 0 additions & 19 deletions Super simple background image slideshow.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,19 +0,0 @@
    /*! 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));
    3 changes: 1 addition & 2 deletions Super simple background image slideshow.min.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1 @@
    /*! 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);
    !function(t){"use strict";var a=t("[data-slides]"),ni=0,s=a.data("slides"),e=s.length,n=function(){console.log(ni, s[ni]);if(ni>=a.length){ni=0}else{ni++};a.css("background-image",'url("'+s[ni]+'")').show(0,function(){setTimeout(n,5e3)})};n()}(jQuery);
  14. @mhulse 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);
  15. @mhulse 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: */
  16. @mhulse 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);