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.

Customization

Adding/Removing Slides

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:

Related

Comments

Great job on the slider. It might be surprising but its not that easy to find a slider on that incorporates html into the slide. May I make one little suggestion, how about when it reaches slide 6 it reverses direction and slides back to the first one instead of progressing the in the same direction back to slide one.

Yeah good point, should probably have a default of “swing” or whatever. It does come bundled with the plugin and clearly states it needs it though. I just really like the “easeOutBack”, looks so much nicer.

I agree, I just made this post a second ago but you should see this guys work. http://ennuidesign.com/demo/contentslider/ he has it sliding with a DIV so you can slide anything; I wish he had it with counting the DIVs like this example counts the LI but ennuidesign works really well. Hope to be of help :)

Jason’s slider is pretty cool. Just for the record though, using DIV vs. LI is pretty irrelevant. Either slider could easily be adjusted to use either type of HTML element. They are both block level elements…. List items are used here because a bunch of slides is kind of like a list, and the UL wrapper is kind of useful in the CSS.

Your posts always seem to come at just the right time! Right when I’m searching for the exact thing for my portfolio page… I’ll download and look into the files… hopefully there’s a simple way to change the page navigation. Other than that it looks beautiful!

I really like this. You mentioned that for a future release you could: “Build-your-own navigation, so you could for example, use inline images that are clickable to go to particular slides.” Would it be possible to extend this a bit by having the hashtags load that particular slide. So, for instance if you were to link someone to http://css-tricks.com/examples/AnythingSlider/#panel-3 externally, it will open the page with that slide active?

I have seen this done in other sliders, and since this is the “everything slider” that would be a nice feature also.

Just 1 query…
What if I have say 50 photos, and I want to display them using your slider. Is there a way to get pagination for say set of photos. Like is it possible to have 10 photos per page, so it would be like..
1.. 2.. 3. … 10 … Page 1
1.. 2.. 3. … 10 … Page 2
and so on.

Thank you for this awesome slider. I too am trying to implement this on a wordpress site.

I have pasted the script embeds and code into my header.php file in the head section. I have also uploaded the js, images and css files included in your download into my theme directory.

Now it seems though that the default links to the css, js and images are not working for me. When I paste the contents of the div “anythingSlider” into my wordpress page to test functionality, it is just displaying an unstyled list with no images, css or js slider presentation.

Do I need to alter the path to the css and js in some way specifically for wordpress? I’ve tried inserting an initial forward slash before the css and js directories like this script type="text/javascript" src="/js/jquery.easing.1.2.js" and it didn’t seem to help.

Definitely doable in WordPress. I’ve put a bit of thought (not much yet) into this, and there would be a few things you’d need to change to make it seamless.

But for example, you could create a separate PHP function that would “build” your slide based on the contents of your post, or if you’d rather have control over every single aspect of the slide so that they look dynamic instead of similar from one slide to the next, you could have it such that slide content is taken from a meta field instead of using the post content/title/etc.

To do it automatically, have a look at the free Androida theme and they way they populate content into their own glider. (note: at my blog at monkey-house.ca, I describe how you’ll need to work with the limit post plug-in properly, because by default it uses PHP’s striptags() to completely sanitize content, which you probably don’t want).

I don’t know how to write a plug-in yet, but it seems like a great slider to use as a base for a featured content slider plug-in. If I dig into it, maybe Chris will even let it be published as a plug-in. ;-)

Nice work Chris! Super clean, and has a couple features I have recently been looking for in sliders. I used a couple sliders on this page of my site, but I think I might try out your version. I like how it loops around again.

What if you wanted to have three images in a row horizontally visable at a time instead of one, and when you click right it moves to the next one (so two of the originals are still showing). Is that possible?

“Easy” would all depend on your skill level. It would certainly be a whole day of work for me (looking at the code) but probably 5 mins for Chris. ;-) 5 mins to just change it, that is… more time than that to make it an additional option.

But if you just wanted to change it wholesale, it would be a matter of digging through the logic for how the “monolithic” slide is created, then make it vertical instead of horizontal. Then when the scrollLeft() function would be called in the default plug-in as Chris has made it, the statement would ultimately become "base.$wrapper.scrollUp(base.singleHeight * page);"

Naturally, that’s only the end result, not the work that would go into it. I didn’t dig into the code enough to know if you need to create logic for singleHeight or not, and frankly I don’t even know if scrollUp is a function.

That’s why it would take me at least a day… I’m just not fluent enough in the language to be able to rip out a modified version. I’d have to do a lot of trial and error. ;-)

All that to say; I’m confident that it can be done, and “easy” is a matter of your skill and experience.

Hi Chris & Everyone
Thanks for sharing this beauty.
I think look very nice and useful for us. It is great slider and plugin. Last week I find this type of plugin. So it is very very useful for me.
AGAIN THANKS

Fantastic slider I am going to use in my next project I’ll be sure to post it here for all to see.

QUESTIONS: How do I change which slide is linked to from the static anchor link in the body below the slider? I am wanting to create a webside with this method so would like to have some tabs insead of the numbers.

Thanks again I love you site and you videos and tutorials have enabled me to quit my day job and start my own web design company, so thanks for that.

I am messing around with this. It is pretty cool. Can you show me an example of formatting the tab navigation to showing text/titles or images that correspond with the slides. Such as a title to go with each slide. Or a thumbnail image that goes with each slide.
This is pretty cool and very handy.

Thanks, and keep the knowledge flowing. Web development and design. One of the only communities that has an open mind to share with the world. Great stuff to better the web.

This is so great! I am ready to use it, but…
I want to display images and text on the slides. I want to let the user see the picture and read the words and be able to Click on the words or pic to go to a page on that specific topic.
How do I do that?
Thanks for you help!

Has anyone tried to use this slider in Blogger? I have implemented the code in a demo site, and everything works great, except the pictures are pushed to the right by 40 pixels. Anyone have any idea why it is doing this? I can adjust the CSS to fix this, but the demo site here lines everything up perfectly using the same CSS. Does this just not work right with Blogger?

Just took a look at your demo site. Pretty good. However, in the Flash video, the Player head or bar still shows up on screen in a wider browser. Not sure if you noticed that or not. I am assuming a z-index will take care of that but good use.
Not sure about the Blogger thing. You may need to check if the Blogger template has something named similar in the CSS it is providing.
Also, For Everyone, the CSS is a little funky across browser. I tried to do it by putting the tabs on the left side of the slider. Works well in FF and IE8 but in IE7 it breaks. I will fix it later.HERE

Great slider Chris! I know someone in a previous comment brought this up but how well does this slider handle flash content? I’m trying to put an AnyChart flash object in one of the sliders but it’s always visible regardless of which slide is active and the positioning is always below and to the left of the slider wrapper. Anyone have any suggestions?

Jim – thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you thank you

Here’s a conundrum. I love this tool, and I’m building my new portfolio using it. I’ve added a bit of overlay text over the images using z-index layering. It works great on every browser but Safari on the Mac (and therefore the iPhone). On that browser/OS combo, all the text gets shifted one slide to the left, so that text and image no longer match up.

Solved the problem. I was trying to use tags to format my overlay text, but that was confusing Safari (and Chrome, and PalmOS, as it turns out). I changed it so that the tags had the overlay formatting attributes instead, eliminating the need to use a tag. That seemed to solve the problem.

Hmm … the code tags didn’t work as I expected in my reply above. The first bit of code was supposed to be a div tag, the second was an li tag, and the third was a div tag again. Apologies for the multiple replies.

This is a great slider. I’m having trouble getting it to fit on my friend’s zen-cart web site. I’ve been able to adjust the width to fit in the center column, but I can’t get the text I have in blockquotes to shrink enough to be able to see it all. My CSS is a beginner and would appreciate any help. My site is here.

Hey guys, love the slider. I am having an issue though, in IE6 and Safari, when you first go to the page, the first slide is off to the right a little bit, so you see a little of the FINAL slide to the left. if you refresh, it works.

any advice? i am loving this js! just need to button up this last issue. thanks!

Hi,
is there any way to make an extra link which is able to go to the next slide (or the slide before). I know that the forward (or back) button does this but I want to have an extra link.
I got no idea how to manage this.

Hi! If I turn “autoplay” to false (or null) the entire slider stops responding to the navigation… no arrows, no direct selection, nothing… It should be like this, or should it remove the autoplay thing only?!…

I have a simple question. Your “static link” example points to slide 6. How can I formulate multiple static links to various slides? A link to slide 4? Another to slide 3? Maybe simple… but not for me.

But what about having two or three static links on the same page? Do I need to create separate jquery functions for each link? It seems like one function should be able to parse multiple links somehow.

I’ve just duplicated the jquery snippet, changed the css tag and the number of the slide in each instance, and so created multiple static links on the same page. Seems like there should be a simpler way. But this works, too.

I’ve got a problem with the orientation of the slides across browsers. It looks fine in Safari and FF, although I had to adjust the left margin of the images to -40px. However, in the dastardly IE, the images appear to be another 40px off center. I tried adjusting my IE stylesheet so that the anythingslider li’s have a 40px margin, but that only worked on the first image and threw all the others off even more. On top of that, IE doesn’t seem to like my overlaid text (in h2, h3, and h4 tags), bumping it up by what looks to be 10px. Someone help? Please??

Hi
Great plugin, really cool and nice to use. I have a quick question if thats ok.
I have built separate navigation as you said, but one thing it doesnt do is put the #panel-5 etc in the address bar. Was hoping it could do this as its a page people will reload often, so wanted them to come back to the same panel as they left.
Is there anyway of adding that to the links? Id be really grateful if someone could help! Thanks!

Excellent! I did not see the titles or how implemented as shown at the top of the page. I created my own “lower third” for my website in development. Everything looked fine in Firefox. In Safari, text from the second slide shows up in the first, etc. See examples at

I am in the same boat as Aaron and few others. I don’t require panel-1, panel-2 etc to appear in the URL # state. Can the respective titles appear as requested by others? Also if you specify a div id wrapped around a and call that in the URL it displays the correct slider but then if you got forwards or backwards it just jumps a few sliders and carries on as normal. Very strange?!

Help!
Love the slider but is anybody else having a problem with it getting stuck when it gets to a certain number? On the site I am working on it always gets stuck going to slide 10 (I have 16 slides total). I also did a quick test on the original downloaded files from this site. I created 18 slides by duplicating the 6 slides that are in the demo. It keeps getting stuck at 14. I can continue to click next and it will advance through to the end then when it starts over the first slide will come back into view. Any thoughts? Thanks

I was wondering about adding a jquery effect as well. I’m not really familiar with jquery, but basically, I wanted each slide to fade and blur as it slides out. I believe jquery has an effect called “drop” that should cover it, but I’m not sure if or how to combine the easing with the effect. Any help would be appreciated. Is it even possible?

Like the rest in here I like your plugin and your way of looking a the web i general. Why spend hours on IE6 fixing when people that still uses IE6 and lower, propely don’t care to much about the hole look and feel of the web today! That said :) When I was going trough your slider.css I found a bug:

#thumbNav a { color: black; font: 11px/18px; Georgia, Serif; ... }

There is a extra ; after …/18px.

#thumbNav a { color: black; font: 11px/18px Georgia, Serif; ... }

I’m going to try making it use the whole width of the page, so that every slide li will come from out side the page and slide in place to the center. If any one or you Chris have a quick solution for that. I would be very greatfull :)

hi how can i add this another feature in plugin
in which i choose which way the slider scrolls
for example horizontally or vertically
the slider scrolls horizontally for now
but wat if i want to make it move vertically as well
thnx a lot
p.s
one thing more “:) i want to use this plugin in a page where there is a slider with in the slider one scrolls side ways one scrolls up and down :) thnx for help mate

hi how can i add this another feature in plugin
in which i choose which way the slider scrolls
for example horizontally or vertically
the slider scrolls horizontally for now
but wat if i want to make it move vertically as well
thnx a lot

one thing more “:) i want to use this plugin in a page where there is a slider with in the slider one scrolls side ways one scrolls up and down :) thnx for help mate

Hi there! Is it easy to add a feature that makes text slide in from left or right (or fade), just after a slided in image? Like for each slide there are to events: one is the slide in of the image, the other one is the slide in of text over the image…

I was wondering how can I call the next slide when the slide innerHTML is empty? I connected the slider to a dynamic database and if there are empty records it returns an empty slide in between slides. How can I skip those empty slides? Something like:

$("#slide-jump").click(function(e){
$('.anythingSlider').anythingSlider(+1); //go to whatever next slide that has any text in its value.
e.preventDefault();
});

Has anybody noticed that if you have other tabs open, and you have the anythingslider set to auto play and loop infinite, if you go to another tab, when you come back to the tab with anything slider in it, the slider has stopped.

I have made a component for joomla 2.5 used anythingslider in that and now have to migrate the component for joomla 3.0.Now the problem arises joomla has jquery added to the head by default but when we tries to add the anythingslider js it gets added before jquery and slider doesn’t appear.To rectify the problem we had tried the following things but without any luck
added our own jquery before anythingslider’s js and used jQuery.noconflict with it but still same result
when we remove jquery from the core joomla file.It works but we cannot make any changes in core files so we have to do it from component only

This is a really nice slider and am using it for a client. I’m having one issue though if anyone can offer a fix. The slider is showing a flash of un-styled content on load, after it’s cached all is well, but the initial load is messy. Has anyone else encountered that and know of a fix for this? Here is the site if you can take a look.