NoticeI've pretty much stopped updating this blog, but the plugin development is still on-going. You can find the link to the Github project page at the bottom of the article.
IntroductionThis plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses jQuery.ScrollTo to achieve the scrolling animation. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll, also combined.
What's it for ?jQuery.SerialScroll doesn't have one definite purpose. It's generic and adaptable. You can certainly use it as a screen slider. That is, to sequentially navigate a group of screens.
This plugin can also animate a text scroller in no time.
It can definitely handle slideshows, the high customizability of the scrolling effect lets you create beautiful animations.
You can even build an automatic news ticker!
Three of these uses are exemplified in the demo.
Remember, it's not restricted to these situations. It will take care of any collection of html elements that you want to scroll consecutively.
Settings and customizationjQuery.SerialScroll gives you access to a lot of options.
targetThe element to scroll, it's relative to the matched element.
If you don't specify this option, the scrolled element is the one you called serialScroll on.
eventon which event to react (click by default).
startfirst element of the series (zero-based index, 0 by default).
stephow many elements to scroll each time. Use a negative number to go on the other way.
lockif true(default), the plugin will ignore events if already animating. Then animations can't be queued.
cycleif true, the first element will be shown after going over the last, and the other way around.
stopif true, the plugin will stop any previous animations of the element, to avoid queuing.
forceif true, an initial scroll will be forced on start.
jumpif true, the specified event can be triggered on the items, and the container will scroll to them.
itemsselector to the items(relative to the scrolled element).
prev(optional)selector to the 'previous' button.
next(optional)selector to the 'next' button.
lazyif true, the items are collected each time, allowing dynamic content(AJAX, AHAH, jQuery manipulation, etc).
intervalIf you specify a number, the plugin will add auto scrolling with that interval.
constantShould the speed remain constant, no matter how many items we scroll at once ? (true by default).
navigationOptionally, a selector to a group of elements, that allow scrolling to specific elements by index. Can be less than the amount of items.
excludenewIf you want the plugin, to stop scrolling before the actual last element, set this to a number, and that amount of items is ignored counting from the end.
This is useful if you show many items simultaneously, in that case, you probably want to set this option to the amount of visible items - 1.
onBeforeA function to be called before each scrolling. It receives the following arguments: event object, targeted element, element to be scrolled, collection of items and position of the targeted element in the collection.
The scope(this) will point to the element that got the event. If the function returns false, the event is ignored.
Check its demo to see all of them.
The option 'target'This option is a new addition, included since 1.2.0.
Before, you needed to call the plugin once for each scrolled element.
When this option is specified, the matched elements are no longer the scrolled elements, but a container.
In this case, the selectors of prev, next, navigation and target will be relative to this container, allowing you to call SerialScroll on many elements at once.
External manipulation, event triggeringjQuery.SerialScroll automatically binds 3 events to the containers.
prev.serialScrollScrolls to the previous element.
next.serialScrollScrolls to the next element.
goto.serialScrollScrolls to the specified index, starts with 0.
stop.serialScrollStops the autoscrolling.
notify.serialScrollUpdates the active item.
$(container).trigger( 'prev' );
$(container).trigger( 'next' );
$(container).trigger( 'goto', [ 3 ] );
$(container).trigger( 'start' );
$(container).trigger( 'stop' );
$(container).trigger( 'notify', [ 4 ] );'notify' also accepts a DOM element(item), or any of its descendants.
$(container) is the element that gets scrolled each time. If you specified a 'target', then that element, else, the element you called the plugin on.
Note that to use 'start' and 'stop' you need to use the option 'interval' first.
If your container element already has any of these event names bound(odd!), then just add the namespace when you trigger.
You probably won't need to deal with these events, but if so, this is how.
What makes jQuery.SerialScroll so special ?This plugin has many positive features, of course, it won't fit everyone's needs. That's impossible.
Small FootprintThis plugin is tiny, as said before, it requires jQuery.ScrollTo. Both plugins together, take less than 3.5kb minified.
If by chance, you decide to include jQuery.LocalScroll, the 3 of them require less than 5kb. Including this plugin is not a bad idea, it can be used, instead of the option 'navigation' to build a widget with sequential and random scrolling.
Highly customizableThis plugin has many settings to customize, in addition, it can use jQuery.ScrollTo's settings. That makes 27 different options!
If you take a while to analyze them all, you can make your work really unique.
Accessible, degrades gracefullyProbably many will automatically skip this part, shame on you!
AdaptablejQuery.SerialScroll won't alter the html or styles at all.
You are in control of the styles and content of your collections. You don't need the plugin to decide what html to use, or how many items to show simultaneously, and you can safely change that yourself, the plugin will always work.
The items don't need to have fixed size, nor to be aligned. SerialScroll will scroll from one to the other, no matter what.
If you want a plugin with premade styles or automatic generation of html, then you should consider any of jQuery carousels.
Generic and reusableFinally, as mentioned before, this plugin can be used for many different situations and doesn't have one specific application.