Skip to content
A jQuery Slider plugin for anything. http://css-tricks.github.io/AnythingSlider/
CSS JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
css
images
js
README.textile
index.html

README.textile

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.

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
  • Optionally autoPlay once through, stopping on the last page

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
	stopAtEnd: false,               // If true, and autoPlay is on autoPlay will stop on the last page
	navigationFormatter: null       // Advanced Use: details below
	forwardText: "»",			// Link text used to move the slider forward
	backText: "«",			// Link text used to move the slider back
	width: null,						// Override the default CSS width
	height: null,					// Override the default CSS height
});

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.3.2

  • Greatly refactored CSS for a more fluid resizing behavior
  • Dimensions can be passed via javascript or modified at the top of the css file
  • Merged all Github forks
  • Wrapper DIVs are no longer needed in the source html
  • Improved CSS scope, Javascript degredation is handled differently now however

Version 1.3.1

  • Markup improvements by Dean Sofer
  • Wrapper divs (<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery
  • CSS classes are scoped to the added classes
  • Hash URLS now work for multiple panels
  • Improved code formatting (again) and merged all forks

Version 1.3

  • Accessibility improvements by Matt Lawson
  • Some generic JavaScript/HTML/CSS code cleaning
  • Move to GitHub entirely
  • Ensures unique panel ID’s
  • Removes navigation if there is only one panel
  • Added option to stop on the last page when autoPlay is set to true

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

To Do

  • Make ID’s less generic e.g. “wrapper” should be more like “as_wrapper”
  • Allow dynamic sized sliders.
    • Calculate existing dimensions and size window accordingly
    • Resizing requires manually adjusting CSS in several different locations
    • Might be resolved by slightly refactoring/improving the HTML/CSS markup only
Something went wrong with that request. Please try again.