Thursday, June 6, 2013

Minimal jQuery.slideshow()

Yesterday, I worked on a barebones jQuery slideshow that would be able to be easily customized for our websites. Why create another slideshow plugin when we have this wonderful plugin: http://jquery.malsup.com/cycle/? I don't know, waste some time at work, ha!

I only wanted the basic functionality of a slideshow. It needs to select a group of items and cycle through them at a set speed. There should be public methods like: next(), prev(), gotoSlide(), pause(), play() for manually switching slides. While building this slideshow, I figured that it doesn't actually need to switch the slides, just dispatches "change" event when it's time.

In the end i did break down and add a bit of code to auto generate previous button, next button, and/or a menu if needed, but other than that it is very small and ment to be extended to your needs.
//default settings (w menu)
$(".slideshow").slideshow({
    nav : "menu",
    delay : 700,
    slidesSelector : "ul.slides > li",
    onChange : [function (event, index, $slides, $slideshow)]
});
Now it's up on Git Hub (which I'm a bit of a noob at). you can download it here:
https://github.com/jasonsavage2/jquery.slideshow

Let me know what you think, or if you have any ideas on how it could be better.

No comments:

Post a Comment