A jQuery slideshow that simply fades between a list of images.
Features:
- Options: slide duration, fade time
- Allows for multiple slideshows at once
- No bells
- No whistles
Last active
December 24, 2015 02:39
-
-
Save steven2358/6731980 to your computer and use it in GitHub Desktop.
Simple Slide: A jQuery slideshow that simply fades between a list of images.
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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Simple Slide demo</title> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script> | |
| <script src="simple_slide.js"></script> | |
| <style type="text/css"> | |
| ul {position: relative; list-style-type: none; } | |
| li {position: absolute; top: 0; } | |
| #slides {height: 450px; } | |
| #slides_mini {height: 100px; margin-top: 10px;} | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <ul id="slides"> | |
| <li><img src="http://lorempixel.com/800/450?1"></li> | |
| <li><img src="http://lorempixel.com/800/450?2"></li> | |
| <li><img src="http://lorempixel.com/800/450?3"></li> | |
| <li><img src="http://lorempixel.com/800/450?4"></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <ul id="slides_mini"> | |
| <li><img src="http://lorempixel.com/500/100?1"></li> | |
| <li><img src="http://lorempixel.com/500/100?2"></li> | |
| <li><img src="http://lorempixel.com/500/100?3"></li> | |
| <li><img src="http://lorempixel.com/500/100?4"></li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript"> | |
| $(document).ready( | |
| function() { | |
| simple_slide("#slides",3000,1000); | |
| simple_slide("#slides_mini",3000,1000); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
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
| // https://gist.github.com/steven2358/6731980/ | |
| function show_next(ul_id, fadetime) { | |
| $active_slide = $(ul_id).children(".active"); | |
| $next_slide = $active_slide.next(); | |
| if ($next_slide.index()<0) { | |
| $next_slide = $(ul_id).children().first(); | |
| } | |
| $active_slide.removeClass("active"); | |
| $active_slide.addClass("hiding").animate({opacity: 0}, fadetime, function(){ | |
| $(ul_id).children(".hiding").hide(); | |
| }); | |
| $next_slide.show().css({opacity: 0}) | |
| .removeClass("hiding") | |
| .addClass("active").show() | |
| .animate({opacity: 1}, fadetime); | |
| } | |
| function simple_slide(ul_id, duration, fadetime){ | |
| $(ul_id).children().css({opacity: 0}).removeClass("active").hide(); | |
| $(ul_id).children().first().show().addClass("active").css({opacity: 1}); | |
| // rotate all images | |
| play = setInterval(function(){ | |
| show_next(ul_id, fadetime); | |
| }, duration); | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment