Website Design & Marketing

Tags: jquery plugin, jquery slider

Originally Posted at CSS-Tricks

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]

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

Usage & Options (defaults)

$('.anythingSlider').anythingSlider({
        easing: "swing",                // 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
        pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        startText: "Start",             // Start text
        stopText: "Stop",               // Stop text
        navigationFormatter: null       // Details at the top of the file on this use (advanced use)
});

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.

Linking Directly To Slides from Static Links
Target the link using and ID or Class (or whatever), and apply a click handler. Then call the plugin function and pass it a number of the slide you are trying to link to:

$("#slide-jump").click(function(e){
    $('.anythingSlider').anythingSlider(6);
    e.preventDefault();
});

Related Blogs

• Related Blogs on jquery plugin
• AnythingSlider jQuery Plugin
• jApex – A jQuery Plugin for APEX « Tyler Muth’s Blog
• Club Encore Dallas

• Related Blogs on jquery slider
• AnythingSlider jQuery Plugin

Related Posts:

• Tracking outgoing links with Google Analytics and jQuery

This entry was posted on Wednesday, August 26th, 2009 at 1:17 pm and is filed under Javascript / AJAX. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.