Features
- Panels are HTML Content (can be anything).
- Multiple AnythingSliders allowable per-page.
- Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).
- Optionally resize each panel (specified per panel in css).
- Optional Next / Previous Panel Arrows.
- Use keyboard navigation or tabs that are built and added dynamically (any number of panels).
- Link to specific slides or go forward or back one slide from static text links - go to Slide 4 (Quote #2) in second example.
- Each panel has a hashtag (can link directly to specific panels).
- Optional custom function for formatting navigation text.
- Auto-playing slideshow (optional feature, can start playing or stopped)
- Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).
- Pauses slideshow on hover (optional).
- Optionally play the slideshow once through, stopping on the last page.
Usage
Getting current slide number:
var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #
Setting current slide (external link example):
<a href="#" id="slide-jump">Slide 4</a>
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
});
External Slideshow Control:
$('#slider1').data('AnythingSlider').startStop(true); // start the slideshow
$('#slider2').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider1').data('AnythingSlider').goForward(); // go forward one slide
$('#slider1').data('AnythingSlider').goBack(); // go back one slide
Formatting Navigation Text:
index = integer index (1 based);
panel = jQuery wrapped LI item this tab references.
Function must return a string of HTML/Text.
Here is a sample formatter (view this page source for another example):
$('#slider').anythingSlider({
navigationFormatter : function(index, panel){
return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
}
})
No comments:
Post a Comment