Original By Chris Coyier, based upon lots of smart stuff by Remy Sharp,
significantly improved by Douglas Neiner

AnythingSlider

Theme:

Other Information
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet accumsan eros, et iaculis massa fringilla auctor.
- Proin a mi ante, ut lobortis risus. Sed fringilla augue sed enim faucibus eget aliquam tellus ultricies.
- Morbi a magna eu ligula scelerisque lobortis vel non nisi.
- Aliquam condimentum libero eget elit ultrices sit amet ullamcorper felis gravida.

Queenie's Killer Tomato Bagel Sandwich

Ingredients
- 1 bagel, split and toasted
- 2 tablespoons cream cheese
- 1 roma (plum) tomatoes, thinly sliced
- salt and pepper to taste
- 4 leaves fresh basil
In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.
-- Les Dawson
Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.

- Chikezie Ejiasi

Features

Panels are HTML Content (can be anything).
Multiple AnythingSliders allowable per-page.
Add or remove content, then easily update the slider.
Themes can be applied to individual sliders.
Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide). This can be disabled.
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 (if files are hosted on the web).
Pauses slideshow on hover (optional).
Optionally play the slideshow once through, stopping on the last page.
Extend the script by binding to custom events, last triggered event: none
Optional FX extension to add animation to panels elements as they scroll into and out of view. See the demo page.
Works with jQuery 1.4+, but can be made to work with jQuery v1.3.2 by uncommenting code (in the non-minified version).

Default Options

See the documentation for complete description of these options (appearance, navigation, slideshow, callbacks & events, interativity & misc).

$('#slider1, #slider2').anythingSlider({
  // Appearance
  width               : null,      // Override the default CSS width
  height              : null,      // Override the default CSS height
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
  tooltipClass        : 'tooltip', // Class added to navigation & start/stop button (text copied to title if it is hidden by a negative text indent)
  theme               : 'default', // Theme name
  themeDirectory      : 'css/theme-{themeName}.css', // Theme directory & filename {themeName} is replaced by the theme value above

  // Navigation
  startPanel          : 1,         // This sets the initial panel
  hashTags            : true,      // Should links change the hashtag in the URL?
  infiniteSlides      : true,      // if false, the slider will not wrap
  enableKeyboard      : true,      // if false, keyboard arrow keys will not work for the current panel.
  buildArrows         : true,      // If true, builds the forwards and backwards buttons
  toggleArrows        : false,     // if true, side navigation arrows will slide out on hovering & hide @ other times
  buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
  enableNavigation    : true,      // if false, navigation links will still be visible, but not clickable.
  toggleControls      : false,     // if true, slide in controls (navigation + play/stop button) on hover and slide change, hide @ other times
  appendControlsTo    : null,      // A HTML element (jQuery Object, selector or HTMLNode) to which the controls will be appended if not null
  navigationFormatter : null,      // Details at the top of the file on this use (advanced use)
  forwardText         : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)

  // Slideshow options
  enablePlay          : true,      // if false, the play/stop button will still be visible, but not clickable.
  autoPlay            : true,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
  autoPlayLocked      : false,     // If true, user changing slides will not stop the slideshow
  startStopped        : false,     // If autoPlay is on, this can force it to start stopped
  pauseOnHover        : true,      // If true & the slideshow is active, the slideshow will pause on hover
  resumeOnVideoEnd    : true,      // If true & the slideshow is active & a youtube video is playing, the autoplay will pause until the video completes
  stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page. This also stops the rewind effect when infiniteSlides is false.
  playRtl             : false,     // If true, the slideshow will move right-to-left
  startText           : "Start",   // Start button text
  stopText            : "Stop",    // Stop button text
  delay               : 3000,      // How long between slideshow transitions in AutoPlay mode (in milliseconds)
  resumeDelay         : 15000,     // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds).
  animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
  easing              : "swing",   // Anything other than "linear" or "swing" requires the easing plugin

  // Callbacks
  onBeforeInitialize  : null,      // Callback before the plugin initializes
  onInitialized       : null,      // Callback when the plugin finished initializing
  onShowStart         : null,      // Callback on slideshow start
  onShowStop          : null,      // Callback after slideshow stops
  onShowPause         : null,      // Callback when slideshow pauses
  onShowUnpause       : null,      // Callback when slideshow unpauses - may not trigger properly if user clicks on any controls
  onSlideInit         : null,      // Callback when slide initiates, before control animation
  onSlideBegin        : null,      // Callback before slide animates
  onSlideComplete     : null,      // Callback when slide completes

  // Interactivity
  clickArrows         : "click",         // Event used to activate arrow functionality (e.g. "click" or "mouseenter")
  clickControls       : "click focusin", // Events used to activate navigation control functionality
  clickSlideshow      : "click",         // Event used to activate slideshow play/stop button

  // Misc options
  addWmodeToObject    : "opaque", // If there is an embedded object & swfobject.js is active, the script will automatically add this wmode parameter
  maxOverallWidth     : 32766     // Max width (in pixels) of combined sliders (side-to-side); set to 32766 to prevent problems with Opera
});

Setup

Add the following inside the `<head></head>` of your page

<!-- Required -->
<link type="text/css" href="css/anythingslider.css" rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.anythingslider.js"></script>
<script type="text/javascript">
$(function () {
 $('#slider1').anythingSlider(); // add any non-default options here
});
</script>

<!-- Optional -->
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>

Example HTML

 <ul id="slider1">
  <li><div class="text">Put anything you want here</div></li>
  <li><img src="image1.jpg" /></li>
  <li><object>...</object></li>
  <li>
   <div class="list">
    <h4>Title</h4>
    <ul>
     <li>List item #1</li>
     <li>List item #2</li>
    </ul>
   </div>
  </li>
 </ul>

Usage

Updating the Slider (content added or removed)
- Any options added inside the anythingSlider call will be ignored.
- Note that if you are removing any panels from AnythingSlider, make sure your script ignores the cloned panels (they have a 'cloned' class). See this page's source for an example.
```
$('#slider1')
  .append('<li><img src="some-image.jpg" alt="" /></li>') // add a new panel to the slider
  .anythingSlider(); // update the slider
```

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

Extending - Event Hooks (callback functions)

Note: In version 1.4.4, the bind function returned arguments were changed to make more straightforward values available, see the callback arguments section below.

before_initialize (onBeforeInitialize) - triggered right after creating the anythingSlider object. *See Note.

initialized (onInitialized) - triggered after creating the anythingSlider object.

swf_completed (onSWFComplete) - triggered when SWFObject completes setting up embedded objects.

slideshow_start (onShowStart) - slideshow started.

slideshow_stop (onShowStop) - slideshow stopped.

slideshow_paused (onShowPause) - slideshow paused.

slideshow_unpaused (onShowUnpause) - slideshow unpaused - may not trigger properly or match a pause event if user clicks play/stop button.

slide_init (onSlideInit) - triggered when panel slide is initialized (before controls animate).

slide_begin (onSlideBegin) - triggered before panel slide animation.

slide_complete (onSlideComplete) - triggered after panel slide animation.

* Please note that at when the onBeforeInitialize event triggers/callback is called, almost nothing has been set:

The anythingSlider object has been attached to the ul.

The class anythingBase was added to the ul.

The ul was wrapped in two divs (div.anythingSlider div.anythingWindow).

That's it! If you want to use some anythingSlider functionalities, you probably want to wait for the initialization to be completed (and register to the event initialized or use the onInitialized option).

You can bind to any of the custom event triggers as follows (see this page source for another example):

$('#slider1').bind('slide_complete', function(e, slider){
 $('#status').text( 'Now on page #' + slider.currentPage );
 // Do something else
});

$('.anythingSlider').bind('slideshow_start slideshow_stop', function(e, slider){
 var msg = (e.type == "slideshow_start") ? 'Someone started the #^&%$! slideshow!' : 'Whew, thanks for stopping the slideshow';
 $('#status').text( msg );
});

or use one of the callback functions:

$('#slider').anythingSlider({
 onSlideComplete : function(slider){
  alert('Welcome to Slide #' + slider.currentPage);
 }
})

( examples are if you use "slider" in the callback function, e.g. function(slider){...}, or in the trigger function, e.g. function(e, slider){...} )

Argument Description

slider.$currentPage jQuery object of the Target page - not the same page as "slider.currentPage".

slider.$lastPage jQuery object of the starting page - same page as "slider.currentPage" until "slide_complete" is called.

slider.currentPage Currently displayed page/slide number. Updated when the animation completes.

slider.pages Number of pages contained in the slider.

slider.playing Is true if the slideshow is currently playing (is false when slideshow is paused, but true while youtube video is playing).

slider.hovered Is true if the slider is currently being hovered.

slider.options.{name} Access any of the options (e.g. slider.options.theme). Trying to set the options this way may break the slider.

Formatting Navigation Text
To use the navigationFormatter option, you must have a function that accepts two parameters, and returns a string of HTML 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
 }
})
```

Argument	Description
slider.$currentPage	jQuery object of the Target page - not the same page as "slider.currentPage".
slider.$lastPage	jQuery object of the starting page - same page as "slider.currentPage" until "slide_complete" is called.
slider.currentPage	Currently displayed page/slide number. Updated when the animation completes.
slider.pages	Number of pages contained in the slider.
slider.playing	Is true if the slideshow is currently playing (is false when slideshow is paused, but true while youtube video is playing).
slider.hovered	Is true if the slider is currently being hovered.
slider.options.{name}	Access any of the options (e.g. slider.options.theme). Trying to set the options this way may break the slider.

Changelog

Only the latest version will be shown here. See the full change log here.

Version 1.5.7.3

Remove all ids in cloned panels - attempt to fix issue #59.

Version 1.5.7.2

Adjusted some css to replace the bottom border in other themes when the slider is not at default size.
Adjusted Portfolio css theme to not hide the control bar.

Version 1.5.7.1

Added css to fix RTL pages breaking the slider - fix for issue #57.
Added overflow:hidden to the anythingslider wrapper to prevent Opera and Safari from adding a horizontal scrollbar.

Version 1.5.7

Added infiniteSlides option. Fix for issue #58.
- When true, the slider acts like an infinite slider.
- When false, the slides stop at the first and last panel, even the slideshow.
- The first and last panels are no longer cloned when this option is false. Blank panels were added in place.
- When the slider is on the first or last panel, the slider will display a "rewind" effect if the stopAtEnd option is false.
- When the slider is on the first or last panel and the stopAtEnd option is true, the back and forward arrow keys (respectively) will have a "disabled" class applied - modified in the css.
Replace appropriate code to make AnythingSlider backwards compatible with jQuery 1.3.2, but you'll need to uncomment out the portion at the end. You'll have to add it manually to the minified version. Sort of fix for issue #38.
Removed callback functions set to "null" in the default options to reduce the file size. The callbacks will still work.
Modified bits of the code to appease the JSLint gods.

Original By Chris Coyier, based upon lots of smart stuff by Remy Sharp, significantly improved by Douglas Neiner