Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A jQuery Slider plugin for anything.
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)
  • Optional 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
  • Pauses autoPlay on hover (option)
  • Link to specific slides from static text links
  • Optionally autoPlay once through, stopping on the last page
  • Optionally resizes dimensions for each panel (specified per panel in css)

Default Options

$('#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

	// Navigation
	startPanel          : 1,         // This sets the initial panel
	hashTags            : true,      // Should links change the hashtag in the URL?
	buildArrows         : true,      // If true, builds the forwards and backwards buttons
	buildNavigation     : true,      // If true, builds a list of anchor links to link to each panel
	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
	autoPlay            : true,      // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
	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, it will pause the autoplay until the video is complete
	stopAtEnd           : false,     // If true & the slideshow is active, the slideshow will stop on the last page
	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)
	animationTime       : 600,       // How long the slideshow transition takes (in milliseconds)
	easing              : "swing"    // Anything other than "linear" or "swing" requires the easing plugin
});

Usage

Getting current slide:
$(‘#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
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 index.html 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
    }
    })

Changelog

Version 1.3.7

  • Added startPanel option.
  • Added playRtl option to reverse the play direction.
  • Added back stopAtEnd option (not should how it was removed from the options).
  • Added resumeOnVideoEnd option to prevent an active slideshow from pausing a video.
  • Changed location of reverse reference from the wrapping div (“anythingSlider” class) to the original ul (“silder1” id in the first example) – updated instructions.
  • Fixed height/width options to accept strings (e.g. “400px” instead of a number, it may not work properly if values are other than the numnber of pixels).
  • Fixed setting to accept strings (e.g. $(slider).anythingSlider(" 1 ")) as well as numbers.
  • Fixed problem with objects (youtube videos) flickering in Firefox by setting resizeContent to false.
  • Fixed problem that occurs when using an incorrect easing function name (submitted ticket: http://dev.jquery.com/ticket/7064 )
  • Reorganized, cleaned up the code and updated the demos & instructions.

Version 1.3.6

  • Fixed minor bug with links to specific slides and updated example to reflect changes and be less confusing
  • Tweaked start/stop button css to be more maleable

Version 1.3.5

  • Added resizePanel option – does not support percentage sizing.
    • When true, it will resize all panels & solitary content to the size settings (CSS or the script options).
    • When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).
  • Fixed keyboard navigation to work with multiple AnythingSliders on a page.
  • Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.

Version 1.3.4

  • Added keyboard navigation.
  • Embeded objects will now resize to fit the panel.
  • YouTube videos will pause the video when it is not in view and play (if already started) if it is in view.
    Note: this feature only works in non-IE browsers and when the files are hosted on a webserver as the flash player restricts calls between local files and the internet.
  • Modified code according to JSLint & added minified version.

Version 1.3.3

  • Previous / Next arrows are now optional
  • Clicking start button immediately begins transition instead of waiting for the delay

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 (<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery
  • Improved CSS scope and classes, Javascript degredation behaves differently however
  • Hash URLS now work for multiple panels

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
Something went wrong with that request. Please try again.