Skip to content

Instantly share code, notes, and snippets.

@patotoma
Last active Aug 29, 2015
Embed
What would you like to do?
image slide show
$.fn.slideShow = function(fadeIn, fadeOut, length){
var list = this;
var ID = setInterval(function(){
var visible = $(list).find('li:visible');
$(visible).fadeOut(fadeOut);
if($(visible).is(':last-child')){
$(list).find('li:first').fadeIn(fadeIn);
}else{
$(visible).next().fadeIn(fadeIn);
}
},length);
return ID;
};

Image Slide Show with jQuery

$.fn.slideShow = function(fadeIn, fadeOut, duration){
  var list = this;
  var ID = setInterval(function(){
    var visible = $(list).find('li:visible');
    $(visible).fadeOut(fadeOut);
    if($(visible).is(':last-child')){
      $(list).find('li:first').fadeIn(fadeIn);
    }else{
      $(visible).next().fadeIn(fadeIn);
    }
  },duration);
  return ID;
};

How to use:

  • Download slideshow.js or slideshow_min.js(minified version).
  • Include the file in your html.
  • Use like following:
$(document).ready(function(){
  var imageID = $('#image_list').slideShow(1000, 1000, 3000);
});

You can adjust the values of fadeIn, fadeOut and duration to suit your needs!

Working fiddle

If you have any questions or innovations please leave me a comment.

patriktoma.studenthosting.sk

$.fn.slideShow=function(b,d,e){var c=this;return setInterval(function(){var a=$(c).find("li:visible");$(a).fadeOut(d);$(a).is(":last-child")?$(c).find("li:first").fadeIn(b):$(a).next().fadeIn(b)},e)};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment