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

AnythingSlider

• 
• 
• 

• 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.
• Show multiple slides within AnythingSlider at once. *New in version 1.5.14*
• Expand the slider to fit inside of its container (so it now works with full width or any percentage width fluid layouts). *New in version 1.5.16*
• 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 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.
• Optional Video extension allows video to pauses playing when not in view and resumes when in view (if files are hosted on the web). This currently works for YouTube, Vimeo and HTML5 video. *Coming Soon!*
• 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).

$('#slider').anythingSlider({
  // Appearance
  width               : null,      // Override the default CSS width
  height              : null,      // Override the default CSS height
  expand              : false,     // If true, the entire slider will expand to fit the parent element
  resizeContents      : true,      // If true, solitary images/objects in the panel will expand to fit the viewport
  showMultiple        : false,     // Set this value to a number and it will show that many slides at once
  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 - adds a class name to the base element "anythingSlider-{theme}" so the loaded theme will work.

  // 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         : "»", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
  backText            : "«", // 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
});

Known Issues

• None that we know of!

Changelog

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

Version 1.5.21

• Fixed $currentPage returning the incorrect page during the onSlideInit and onSlideBegin events.
• Added $targetPage which provides the (non-cloned) destination page of the slider.

Version 1.5.20

• Disabled focused links inside of a slider showing multiple slides, so now clicking on a link won't move the slider.

Version 1.5.19

• Removed the themeDirectory option.
  • It is preferred that you add the theme stylesheet manually as described on the setup page.
  • This prevents the plugin from appending the stylesheet to the head of the document and overriding the IE stylesheet.
• Changed the plugin so that an unordered list is no longer mandatory. The plugin will now look for the immediate children of the slider element. So this is now possible:

  <div id="slider">
    <div><!-- slide content --></div>
    <div><!-- slide content --></div>
    <div><!-- slide content --></div>
  </div>

  The method to initialize and control the slider hasn't changed.

Version 1.5.18

• Fixed a problem with a javascript error occurring when only one slide is present and the width is set.
• Added an internal variable "o" to replace "base.options" to reduce the code size by about 1k in both the regular and minified versions.

Version 1.5.17

• Added an "Expand Demo" page because apparently the jsFiddle doesn't like to expand.
• Modified a couple of selectors that are only available in jQuery 1.4+. So as before, if you need the plugin compatible with jQuery 1.3.2, all you need to do is un-comment out the code at the bottom of the "jquery.anythingslider.js" file.

Version 1.5.16

• Added the expand option:
  • When true, the slider will expand to fit into the parent element.
  • This option allows you to apply a percentage width to the parent element for a fluid layout and have the slider resize automatically.
  • One example would be to have a div set to say "100%" browser width. The slider will expand to fit inside this div (width and height).
  • Please do not have the parent element of the slider be the body of the page. It won't break anything, but the height is difficult to determine since the body height measured doesn't include other elements on the page
  • There is a slight delay while resizing (500 millisecond) as the plugin resizes and repositions the panels. You'll just have to live with it :(
  • There is one bug in *Opera* where the height isn't set until the parent element is resized... I'll try to find it.
• Also fixed the showMultiple code so that a width is no longer required if and only if all the panels are the same width. It simply divides the slider width by the number of slides to show... so you see why this may not work so well with different width panels.

Version 1.5.15

• Fixed a problem in the code where startPage was used instead of startPanel - DUH.
• Oh, and also made sure the script was getting a number instead of a string in the start panel option.

Version 1.5.14

• Added showMultiple option - A enhancement proposed in issue #72.
  • When set to a number, AnythingSlider will show that number of slides within the view port.
  • When showing multiple slides, width of the slider MUST be included - well actually it is the width of one slide, so the plugin can figure out how big to make the view port.
  • The maximum number of slides showing is set to the number of slides.
  • If slides have different dimensions and resizeContents is set to false, the slider will resize to the height of the taller slide.
  • Updated the playground with this option. Check it this demo with two slides showing!
  • Thanks to caseybecking for the idea. And a ton more thanks to Poebel for sharing the code to do this.

Version 1.5.13

• Fixed a bug where an empty UL would cause javascript errors - fix for issue #91.
• Changed the panel positioning from using `scrollLeft` to `left`. This small change fixed a couple of problems including:
  • Print preview now shows the current panel without any additional css changes. The navigation arrows and tabs will need additonal print css styling.
  • Easing that required a negative margin using scrollLeft no longer needs any special handling - see issue #61.
  • A hidden AnythingSlider will now position properly. When attempting to set the panel with the slider hidden, scrollLeft would always return zero and not set properly. Updated Wiki FAQ with this information as well.

Version 1.5.12

• Fixed a problem with the "activePage" class being added to the wrong page/panel when the infiniteSlides option is false.

Version 1.5.11

• Updated all demos files to a HTML5 doctype with jQuery v1.6.
• Removed print stylesheet.
• Made file extension .html consistent.
• Added "simple.html", which is the simplest possible demo so it is easier for people to build from.
• Added a menu to each page for easier navigation to other demos and documentation.

Version 1.5.10

• Fixed a bug that triggers the slideshow_stop event and onShowStop callback after each slide change. It now properly triggers after a running slideshow has stopped.
• Changed code to completely remove the empty slides when infiniteSlides is false. It was code that was unnecessarily left in.
• Changed code that replaced links in the cloned panels with code that disables the links - fix for issue #59.
• Added a stylesheet to fix the theme problems in IE7 - fix for issue #71.
  • I'm not sure if this solution works for IE6.
  • One problem was that the navigation links have a negative text-indent. IE7 sends the entire link off-screen instead of just the text inside.
  • Fixed by wrapping all link text in a span and applying the negative text indent to the span instead of the link.
  • The second problem with the navigation arrows being cut off was due to the negative top marginl. So a separate conditionally loaded stylesheet was added with the top margin set to zero and a specific top percentage for each style.
• Added width: 100% to the second slider's fourth panel instead of leaving the width/height undefined. In IE7, it would make the panel 20 pixels wide - fix for issue #73.
• Fx Extension changes:
  • Fixed Fx Caption problem with FX not working when moving from first panel to last panel - fix for issue #75.
  • Fixed Fx caption to now show hidden ("display:none") captions. When clicking on the "x" in the caption, it was hiding the captions permanently, now it doesn't.
  • Changed FX Extension custom FX time to what it should have been, duration. To match the animation option.

Version 1.5.9

• Silly bug fix that broke the navigation tabs - thanks to Hyland3r for pointing it out!

Version 1.5.8

• Added a primitive print stylesheet. Optimized using Firefox & IE9 print preview. But when using IE9 compatibility modes, it works IE7, but not IE8 (entire slider is hidden).
• Slider controls are now hidden in the css, to prevent the flash seen before a theme stylesheet is loaded. This can be prevented by added the theme stylesheet into the head of your document.
• Changed theme stylesheet to be appended into the document head.
• Fixed some of the theme stylesheets so the navigtion links now show in IE8, but still not in IE7 - see known issues above.
• Fixed a problem where the active slider would move when using arrow keys inside a text area or input.
• Fixed animating arrow opacity bug - fix for issue #60.
• Fixed easing on the first slide. Fix for issue #61.
• `currentPage` now shows the correct number during events. Fix for issue #69.(
• Fixed a minor problem with the FX extension fade. Regular base FX expect a size to be the second parameter, and since there is no size for 'fade' it now uses the second parameter for time. So, now this is possible:

  $('#slider1')
   .anythingSlider({
    animationTime : 0
   })
   .anythingSliderFx({
    '.panel' : [ 'fade', 1000, 'easeOutCirc' ] // target the entire panel
   });

  The above code will fade out the current panel and fade in the next. But it does require some extra CSS to set the opacity of all panels to zero, otherwise the fading animation won't occur until the second time through the panels.

  <style type="text/css">
  #slider1 .panel { opacity: 0; }
  #slider1 .panel.activePage { opacity: 1; } /* make sure active panel is visible */
  </style>

  It's not ideal, but it does make it possible to have a fade transition between slides, just not a crossfade transition.