Apr 14, 2011

Anything Slider with different content in panels


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

Test post after a long time

i want to see the post