Home

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

#Blog postings:

• Original AnythingSlider
• AnythingSlider v1.4
• AnythingSlider v1.8+

#CMS Plugins for AnythingSlider:

• Movable Type
• WordPress: Free & Licensed
• Joomla 2.5 Mod (original Joomla Module, Last updated 6/2010; for AnythingSlider v1.2.1)
• SPIP plugin

#Useful Additions

• AnythingSlider Themes (repo).
• AnythigSlider FX Builder (repo).

#Demos

##Main Demos

• Main.
• Simple (basic setup).
• Expanding (shows how the slider will expand).
• Video extension.
• FX extension (Special FX).
• CSS3 demo using the FX extension with the animate.css library.

##Appearance

• Change slideshow delay for different slides (also in the FAQ): Method 1 / Method 2.
• External Captions.
• Popup Captions.
• Fade Transition:
  • true cross-fade (version 1.8+).
  • with FX extension (see the post asking about it) - formatting change in v1.7.11.
  • without FX extension (thanks samf3!).
  • without FX and using fadeTo (thanks hubsmile!). See this issue for more details on how/why to use it.
• Multiple slides.
• Multiple slides based on browser width (see issue #414).
• Expanding width & height.
• Vertical Scrolling.
• One image span two slides.
• Centering a slider (horizontally & vertically; css from here).
• Centering images inside the slider (horizontally & vertically; css from here).
• Add a timer bar (see issue #402).
• Animating an element from top to bottom (without using the FX extension; see this question).

##Functionality

• Basic Albums (see issue #538).
• Activate/Deactive (see issue #85).
• Swipe Support - Swipe events using jQuery Mobile (jQuery Mobile required for swipe support).
• Swipe Support (non-video) - Use the entire slider window, done without using jQuery Mobile.
• Swipe (non-video) - This is the above demo modified to include the navigation arrows which appear when navigationSize is set.
• Swipe Support for Video - This code adds a transparent overlay on the video to allow swipes. Sadly, you can only start the video using the controls at the bottom.
• Flickr Feed to AnythingSlider - Thanks to Jamy & TheDoc.
• Lazy Image Loading - Images in cloned panels are allowed to load, but the other unseen images aren't loaded until the panel comes into view:
  • image tags.
  • image tags & preload next image.
  • background images.
• Resizable Accordion - Resize AnythingSlider height to match accordion height.
• Resizable Dropdowns - Resize AnythingSlider height with dropdowns inside.
• Embed a PDF file - Using Google Docs Reader & embedding.
• Toggle Slideshow externally.
• Save last page using localStorage.
• jqzoom + AnythingSlider - You'll need to use this modified version of jqzoom (see issue #302).
• Autoplay HTML5 video (Don't use the HTML5 autoplay attribute; see this post).
• Autoplay YouTube iframe.
• Making subpanels (see issue #522).
• Make a Vimeo video restart after it completes; also autoplay the video (source).
• Make a wizard-like entry form (see issue #543).
• HTML5 video always start from beginning.

##Navigation

• Custom, external navigation controls.
• Custom, external navigation controls (with updating "cur" class).
• Custom, external navigation & slideshow controls.
• Custom, external navigation with custom hash & with infiniteSlides:false.
• Moving navigation controls using the "appendControlsTo" option.
• Moving controls and arrows.
• One set of arrows controlling multiple sliders.
• One set of navigation controlling multiple sliders (see issue #428).
• Add Prev & Next buttons with the navigation controls.
• Fading Thumbnails & tooltips (see issue #255).
• Greyscale thumbnails:
  • Using css only.
  • Using the "slideComplete" callback (see issue #86).
• Hiding the arrow buttons when on the first or last slide (updated to show arrow css).
• Custom Hash Tags, using panel ID & header ID inside the panel (prefix added to ID to prevent page jump on hash change) - updated 6/26/12.
• Navigate using jQuery UI Slider.
• Navigate using links inside the slider - external links still work.
• Navigate on hovering over external links - using "mousemove" to trigger the change.
• Navigate on hovering over clickable external links - from this StackOverflow question.
• Stop tabs from changing slides - done by adding tabindex="-1" to non-visible focusable elements.
• Duplicate Navigation at the top - from CSS-Tricks forums.
• Make the arrows the same height as the window.
• Show preview thumbnails of the next/previous slide when hovering the arrows (also at codepen) - see this post in the CSS-Tricks forums.
• Add clicky noise to arrows.
• Play multiple sliders sequentially.
• Make slider active when in view - see issue #596.

#Features

• Panels are HTML Content (can be anything).
• Change content by scrolling horizontally or vertically, or by cross-fading between slides. New in version 1.8!
• 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 (added 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; added 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) or use the ID of an element inside the panel.
• 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.
• 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; added in version 1.6.
• Works with jQuery 1.4.2+.

#Known Problems

• Adding flash or video into the first or last slide will cause an error in IE8.
• This problem is due to a problem with jQuery versions 1.5 to 1.6.2 - bug report
• To get around this problem you have a few options:
  • Don't have an <object> in the first or last slide. If using YouTube or Vimeo, switch to the new iframe format.
  • Use jQuery version 1.6.3+ - the error doesn't occur.
  • Set your infiniteSlides option to false - no slides are cloned.
  • Use mode:'fade' - no cloned slides.