Print

[siteFEEDS]

AnythingSlider jQuery Plugin
17 August 2009, 7:09 am

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.



 

View Demo   Download Files

 

Features

Slides are HTML Content (can be anything)

Next Slide / Previous Slide Arrows

Navigation tabs are built and added dynamically (any number of slides)

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)

 

Usage & Options (defaults)

$('.anythingSlider').anythingSlider({

easing: "easeOutBack",          // Anything other than "linear" or "swing" requires the easing plugin

autoPlay: true,                 // This turns off the entire FUNCTIONALY, 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

});

 

Customization

Adding/Removing Slides

Just add or remove more

items from the list inside

, everything else happens automatically.

Adjusting Size

For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. Change the width of .anythingSlider ul li to 580px, change the width of .anythingSlider .wrapper to 580px, and reduce the width of .anythingSlider 100px to 660px.

 

Credits

It was written by me, with code piecemealed together from some of Remy Sharp’s sliders and my own previous sliders. Doug Neiner stepped in and helped make it more efficient, smart, and fix some bugs.

 

Future Ideas

Pause-on-hover (stop autoPlay when cursor over the slides)

Build-your-own navigation, so you could for example, use inline images that are clickable to go to particular slides.

Get your hot and fresh design and development links at Script & Style!





Source: CSS-Tricks