Skip to content
Rob Garrison edited this page Jan 19, 2017 · 103 revisions

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

#CMS Plugins for AnythingSlider:

#Useful Additions


##Main Demos





  • 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.
You can’t perform that action at this time.