marisqa/anythingslider

This jQuery plugin was created by Chris Coyier, based on work by Remy Sharp, and improved by Doug Neiner.

AnythingSlider jQuery Plugin

Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features.

Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider”, and “moving boxes”. Each of them had some cool interesting feature that I needed to build at the time. All were well-received, but as is the case with these things, people want them to do X, Y, and Z in addition to what they already did.

This new AnythingSlider is an attempt at bringing together the functionality of all of those previous sliders and adding new features. In other words, to create a really “full featured” slider that could be widely useful. This is the first time (on CSS-Tricks) that one of these sliders is an actual plugin as well, which should make implementing it and customizing it much easier.

Keep Reading

Features

• Slides are HTML Content (can be anything)
• Next Slide / Previous Slide Arrows
• Navigation tabs are built and added dynamically (any number of slides)
• Optional custom function for formatting navigation text
• Auto-playing (optional feature, can start playing or stopped)
• Each slide has a hashtag (can link directly to specific slides)
• Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
• Multiple sliders allowable per-page (hashtags only work on first)
• Pauses autoPlay on hover (option)
• Link to specific slides from static text links

Usage & Options (defaults)

$('.anythingSlider').anythingSlider({
   easing: "swing",                // Anything other than "linear" or "swing" requires the easing plugin
   autoPlay: true,                 // This turns off the entire FUNCTIONALITY, not just if it starts running or not
   startStopped: false,            // If autoPlay is on, this can force it to start stopped
   delay: 3000,                    // How long between slide transitions in AutoPlay mode
   animationTime: 600,             // How long the slide transition takes
   hashTags: true,                 // Should links change the hashtag in the URL?
   buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
   pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
   startText: "Start",             // Start text
   stopText: "Stop",               // Stop text
   navigationFormatter: null       // Advanced Use: details below
});

To use the navigationFormatter function, 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:

navigationFormatter: function(index, panel){
	return index + " Panel"; 		// This would have each tab with the text 'X Panel' where X = index
}

Changelog

Version 1.2

• Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.

Version 1.1

• Changed default easing to “swing” so didn’t depend on any other plugins
• Removed extra junk (other plugins used for design, etc)
• Added Pause on Hover option
• Added options for passing in HTML for the start and stop button
• Added option to use custom function for formatting the titles of the navigation
• Added public interface for linking directly to certain slides

Version 1.0

• First version