Grow your CSS skills. Land your dream job.

AnythingSlider jQuery Plugin

Published by Chris Coyier

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

The demo page has the current version, complete usage, and up-to-date changelog.

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
  • ....and.... ...wait for it.... more!

Customization

Adding/Removing Slides

Just add or remove more <li> items from the list inside <div class="wrapper">, 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();
});

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.

Comments

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

  2. Permalink to comment#

    Great job, Chris.

    I think I’ll try this out tonight.

  3. Permalink to comment#

    Well done Chris – looks pretty fancy. The navigation could indeed be a bit changed/better, but that’s for future use.

    Oh, why is “easeOutBack” the default easing? I know it looks the best, but the user needs an additional plugin.

    Keep up the great work!

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

  4. Permalink to comment#

    Nice one Chris, can this be used in website templates if proper credit is given in the download file after purchase?

  5. Mike
    Permalink to comment#

    The validator doesn’t like those tags in the image titles, is there not a cleaner way to do it?

  6. Permalink to comment#

    I dig!

    thanks for posting

  7. Permalink to comment#

    Thanks for yet another neat slider Chris. Can’t wait to sink my teeth into this one.

  8. I love it, just what I was looking for!

  9. Wow!

    Love the slider, especially the smooth and endless transitions.

    Great work!

  10. You might like this too, http://ennuidesign.com/demo/contentslider/

    This guy has ANYTHING sliding not just LI but DIV.

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

    • Yes, agreed.

  11. Ryno Burger
    Permalink to comment#

    Very nice!!!

  12. 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!

    Thank you so much Chris.

    • Permalink to comment#

      Or in my case, just a day late on this one! Only yesterday I implemented another slider. As an earlier poster mentioned, one that does not have HTML content (it used images only).

      And now I find this… which has ALMOST everything I want! A day late!

      Only thing missing is a third auto-rotation option: rotate through all slides once, and then return to the first slide.

      But I’m starting to learn me some jQuery. Maybe I can try my hand at implementing that feature. ;-)

  13. Permalink to comment#

    You can add some like this for the pause on over you are wanting to add.

    base.$el.hover(
    function () {
    base.startStop(!base.playing);
    e.preventDefault();
    },
    function () {
    base.startStop(!base.playing);
    e.preventDefault(); }
    );

  14. Federico Reinoso
    Permalink to comment#

    Nice, one (i told this via twitter) I just need a little suggestion, can you please not hard code the ‘start’ ‘stop’ labels of the button?

  15. Love it! Thanks for all the great examples. I was looking for a “Do it all” slider.

  16. Lovely stuff Chris.. I specially like those navigation arrow effect.. never seen them before :)
    P.S. Tweeeted!

  17. This is amazing, exactly what I need for my new web-site. My client will be very excited about this.

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

    Thanks Again!!

    Rich

  19. Incredible job Chris! thnx for sharing.

  20. Matt
    Permalink to comment#

    Is it just me, or is Environmental Engineering spelled wrong in the last slide?

    Otherwise, good job!

  21. Permalink to comment#

    Any way to make customize the navigation button titles?

    i.e. Rather than “1, 2, 3, etc” could you use textual names that make more sense?

    Since you can load in html as slides, it might be handy to use page names instead of sequential numbering.

    • Trevor
      Permalink to comment#

      in the jquery.anythingslider.js

      make these changes:

      // Creates the numbered navigation links
      		base.buildNavigation = function(){
      			base.$nav = $("").appendTo(base.$el);
      			base.$items.each(function(i,el){
      				var index = i + 1;
      				var $a = $("");
      				
      				// If a formatter function is present, use it
      				 if (index == 1){
                          $a.text("Benefits");
                      } else if(index == 2){
                          $a.text("Predict the Future");
      				} else if(index == 3){
                          $a.text("Extra!Extra!");
      				} else if(index == 4){
                          $a.text("Next Generation");
      				} else if(index == 5){
                          $a.text("Save the World");
      				} else if(index == 6){
                          $a.text("A Compelling Story");
                      }
      				$a.click(function(e){
                          base.gotoPage(index);
                          
                          if (base.options.hashTags)
      						base.setHash('panel-' + index);
      						
                          e.preventDefault();
      				});
      				base.$nav.append($a);
      			});
      			base.$navLinks = base.$nav.find('> a');
      		};

      you will also need to modify the slider.css #thumbNav section:
      (here is mine)

      #thumbNav                               { position: relative; top: 0px; text-align: center; }
      #thumbNav a                             { color: #6b6b6b; font: 11px/18px; Georgia, Serif; display: inline-block; height: 24px; width: 138px; margin: 0 0 0 0; background: url(../images/tab.png) repeat-x; text-align: center; }
      #thumbNav a:hover                       { background-image: url(../images/tab_yellow.png) repeat-x; }
      #thumbNav a.cur                         { background: url(../images/tab_yellow.png) repeat-x; text-align: center; }
  22. Great!, can’t wait to try it out!

  23. Al
    Permalink to comment#

    slide titles don’tshow up in IE7

    Al

  24. Permalink to comment#

    This post was right on time. I was searching for a good slider for a big project. You’ve saved me a ton of work. Thanks Chris.

  25. panchicore
    Permalink to comment#

    wonderfull

  26. Helen
    Permalink to comment#

    It took me a while to take notice that there is real text sliding around. Love it! Are Easing and Titleblock in the js-folder necessary for the slider itself?

  27. Awesome Chris!! The linking from static links was HUGE for me. As always, amazing work!!

  28. Pawan
    Permalink to comment#

    This is very good !

    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.

    Pawan

    • You should be able to do this with ajax or maybe PHP.

      Use PHP to “build” the LI list dynamicly thus making it paginate.

      Sorry for the spelling :) im a poor swedish :)

      Good luck to you!

    • Pawan
      Permalink to comment#

      Any hint on how to achieve the same using ASP .NET?

      Thanks,
      Pawan

  29. Great job, Chris! Thanks for sharing this beauty.

  30. Nice work Chris, It’s always nice to see your JQuery work. I’ve bookmarked this along with many other pieces of your work.

    Can you integrate flash into any of your sliders?

    Also, got my votes in for you on the .net awards. best of luck with that!

  31. Davide
    Permalink to comment#

    why don’t you transform this Slide for joomla?

  32. Mike
    Permalink to comment#

    Very very very nice!…

    Any chance there will be proper IE6 support in the future? :)

    • Should work fine in IE 6…. ? The PNGS probably look like shit, but you could just replace those graphics with non alpha-transparent graphics, or… use a PNG hack.

    • Whats really proper about IE anyways :)

      It´s a browser that gets on my developer nerves :)

  33. Matt
    Permalink to comment#

    Hey Chris,

    Great post, great blog, hit your site everyday from all the way over here in Cardiff, Wales, UK!

    Just a question…
    What content slider plugin do you recommend for use with WordPress? The Featured Content Slider thing is all over the place now, any others you recommend?

    The slider in this post is great but would you use it in WordPress?

    Thanks, Matt

    • Sure. Why not?

      WordPress doesn’t care what slider you use.

    • Matt
      Permalink to comment#

      Thanks. What I meant is could it be used to display posts in wordpress like a feature content gallery?

    • Brian Merry
      Permalink to comment#

      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.

      Any ideas out there? Thanks!

    • I would say thats only limited by your imagination :) You should be able to do that with some thinkering and smart coding.

      Good luck :)

    • Permalink to comment#

      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. ;-)

      Greg

    • I’m using this slider in WordPress at http://herrindesign.com. (It’s a projects slider a little ways down the page.)

  34. banny
    Permalink to comment#

    hi chris
    great tut
    how to randomize the slides ?
    like it may jump from slide one to last slide and so on ?
    thnx for this tut

  35. Great… this is another one i will add to my list. Thanks Chris. :D

  36. Permalink to comment#

    This is a nice slider – I especially like the styling for the next/previous arrows. Great use of PNGs :)

  37. Permalink to comment#

    sweet! I was just looking for this exact thing. thanks for saving me some time!

  38. Permalink to comment#

    Great work guys, this is awesome!

  39. that’s amazing and working fine. thanks

  40. Permalink to comment#

    The downside of having a high profile – everything you do undergoes massive amounts of scrutiny! Still, you could consider it free beta-testing…

    It looks very good, and I like the fact that it appears as a scrollable window when Javascript isn’t present.

    Haven’t tested in IE6 yet – those transparent PNGs can be easily fixed though.

    If CSS if turned off but JS is still running there is a duplication of some content – might be a semantic or accessibility issue (sorry, really nitpicking here)?

    Great work, good luck with the .Net awards!

    • I think CSS-Off, JavaScript-On is one of the rarest browser circumstances. Too few hours in the day to be diddling around with that, in my opinion.

    • Permalink to comment#

      I was thinking of the ‘user’ mode in Opera, but yes, I appreciate your point.

  41. really fantastic.

  42. Permalink to comment#

    I was unclear as to whether you can click on a slide to link to another page. It does do this right?

    Assuming so, I wonder if your demo could show that. Since that’s part of why I was unsure.

    Most grateful for your excellent work! Have voted for you on all!!

  43. Permalink to comment#

    excited to try it out, really excellent work as usual!
    Thx!

  44. Nice lil plugin, Chris! This will come in handy, and certainly save time, should I need it. Thanks!

  45. Permalink to comment#

    You never stop amazing me. Though calling this a “plugin” made me instantly think it was made FOR wordpress and not as a tool for every site.

    Not a huge issue as it is still what I am looking for confusion or not.

  46. zack
    Permalink to comment#

    I like how you made it so the last slide goes right to the first unlike the other sliders i.e. they cycle through all the other images before it arrives at the first image.

  47. Permalink to comment#

    Well done, what else can I say? “well done”

  48. Permalink to comment#

    This works great Chris, usual good work! Would you consider turning this into a WP plugin? I’d love to see a screencast on the steps you would take to update the slider content using WP posts.

  49. Permalink to comment#

    This is great. I have something very similar to this on the homepage for my site – I should totally make a YUI3 plugin version of this. :)

  50. Permalink to comment#

    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?

  51. Great slider and plugin. As usal i get alot of good information from your site and posts.

    Have learned alot off CSS and Design related things i had not yet heard of before.

    Keep up the good work!!!

  52. Permalink to comment#

    Looks amazingly good, was hoping there would be an option for vertical sliding rather than just horizontal. Is this easy to do because this is probably the nicest slider i have seen so far.

    • Permalink to comment#

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

  53. Eric
    Permalink to comment#

    Well done!

  54. Looks very useful and nice :) Will definitely help getting a good slider instead of searching endlessly for one that barely works.

  55. lalit
    Permalink to comment#

    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

  56. Permalink to comment#

    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.

  57. josh2000
    Permalink to comment#

    Wonderful! Elegant.
    Are there any plans to include a CAPTION function?
    BTW- love your entire site.

  58. Permalink to comment#

    Great work here.

    Quick question, if you are on a different page can you still link to a specific slide? (i.e im on the home page and click learn more, and get brought to slide 6 on the about page)

    I appreciate any insight

    • Permalink to comment#

      just answered my own question. yes you can link to specific slides from other pages.

      This script rocks – thanks a lot man

  59. Ben
    Permalink to comment#

    Hey Chris, this is perfect, thanks! Building it into our website today!

    • Ben
      Permalink to comment#

      OK I’m tearing my hair out here… I keep getting this JS error:

      base.$wrapper.scrollLeft is not a function

      This seems to be the only thing that’s stopping it from working. I can scroll right no worries, but the left arrow never exits the hover state. Any ideas anyone?

    • Ben
      Permalink to comment#

      PS – It’s getting stuck in an infinite loop, scrollLeft keeps getting called…???

  60. Carlos
    Permalink to comment#

    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.

  61. Very Good, show the ball, it is very useful to me!

    Congratulations!!!

  62. I put my photo in the comments …

    How do I do?

  63. 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!

  64. Antony
    Permalink to comment#

    Hi Chris, not too sure whether we’re able to hardcode descriptive text into the yellow tabs along the bottom as opposed to the numbers?

    And if so how would a noob like me go about doing that.

    Love your site and your work by the way.

  65. This looks interesting. I’ll test your slider tonight. Does it preload bigger images?

  66. Ben
    Permalink to comment#

    OK I figured out what was going wrong.. this doesn’t work with jQuery 1.2.4 which I still had…

    Use the latest build everyone!

  67. Permalink to comment#

    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?

  68. Permalink to comment#

    Oops, sorry. Demo site is here, my original link did not work. In case this doesn’t work it is pspdemosite.blogspot.com

    • Carlos
      Permalink to comment#

      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

  69. Permalink to comment#

    How can i implement in my wordpress blog http://chepelle.altervista.org/wordpress/ ?
    I want a featuring content gallery of the last 4 posts!!!

  70. Hi Chris,

    Just wanted to say a huge “Thank You!!” for this great slider.

    We’ve started using it on our homepage: http://www.ebuyer.com

    Thanks again!

    Daryl :o)

  71. Does anyone know if this slider is search engine friendly? What I mean is – if you have content in 6 slides, will google be able to index the text in all 6 slides?

    Thanks!

  72. ahhh thanks sooo much for this. been dying for a jquery timed slider for my company project. thanks very much

  73. Joe Lazarski
    Permalink to comment#

    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?

    • Joe Lazarski
      Permalink to comment#

      Something else that would be helpful would be the ability, when buildNavigation is set, to specify the tab text.

  74. rory
    Permalink to comment#

    very nice.

    2 thoughts on “anything” title…

    - as stated above, horizontal option a bonus
    - options to change default “slide” behaviour to either nothing or transition with a fade from 1 to the next.

    awesome regardless.

  75. Rob
    Permalink to comment#

    I put a title tag on the li tags…how can I acess this? I wanted the tabs to show the title tag instread of the 1..2..3..etc.


    function formatText(index, panel) {
    return panel + "";
    }

    This just returns [Object] [Object] I was hoping to do like panel.title…but no avail..can anyone help?

    Thanks!

  76. i like this script
    i using is

  77. Simon
    Permalink to comment#

    Is anyone else having problem’s with more than 14 slide items?

    I’m using it for photographs, and on slide 14 the image is cut in half, then the rest don’t appear?

    Have tried just adding more in the original file, wham, same thing. Tested in Firefox and Safari latest release’s, can’t figure it out…

    • Are you running up against the limiting width:9999px on .anythingSlider .wrapper ul? 14 times 700px is around 10,000px. Increasing that width in the stylesheet might fix your slideshow.

    • Simon
      Permalink to comment#

      Thanks Jim, that’s sorted it. Should of known that would make a difference!

    • Thank God somebody else had this problem…

    • jw
      Permalink to comment#

      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

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

    Here’s the work-in-progress draft: adamlevermore/com/Slider

    Anyone have any ideas?

    P.S.: Ignore the layout. I stopped designing when I hit this roadblock, so it’s very much unfinished.

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

  79. Permalink to comment#

    Wow, I hadn’t thought about it that way before. Good write up, very clearly written. Have you written previously about AnythingSlider jQuery Plugin? I’d love to read more.

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

    Thank you, jim

  81. Benn
    Permalink to comment#

    Looks great, any chance of more transition types such as crossfades? Sliding can be a bit abrupt for certain sites. Thanks!

  82. Beakid
    Permalink to comment#

    Hi, great script!

    Although, we’re have problems implementing a form in one of the slides, since the script is cloning the first and last slide (maybe more). Therefore the form-fields get mixed up.

    Seems that the cloning is only for the ability to slide from last to first slide, which we don’t need.

    Is there a way to fix this? Disabling the two clone calls doesn’t help.

    • Beakid
      Permalink to comment#

      Managed to get a fix, but we’ll clean up the code before submitting it :)

  83. Permalink to comment#

    Hi, love this script!

    Works great.
    But as other people asked already, is it possible to use titles instead of 1..2..3.. etc.?

    That would be cool :)

    Thanks anyway!

  84. Great implementation. I had hoped it would have fixed the issue that I have had with nearly every slider I’ve ever used – embedding video.

    http://crowdpeople.com/anythingslider/

    Any ideas Chris?

    Thanks

    Jonathan

  85. Permalink to comment#

    ye so i used it on my new site it seems to be good and i love it.

    Visit my site for free dancehall and reggae when its done until it is done keep visiting for updates

    Click Here to go there now

  86. JupiterMoon
    Permalink to comment#

    @matt: jQuery 1.4 will be out by the end of the year, or early January, John Resig has confirmed it on his blog

    http://blog.jquery.com/2009/08/14/fall-2009-jquery-talks/#comment-466069

  87. Okay, here are my, I’m an idiot questions.

    What is the code I place in my webpage for it to show?

    What is the script code I place on the webpage?

    Where do I upload the folder on my server?

  88. Permalink to comment#

    In IE6 the hover of the arrows (back & forward) doesn’t work!

    In order to fix that you need to update the js-File.
    Add the following code to the the arrow links (a tag):
    href=”javascrip:void();”

    See’ya
    Leif

  89. Permalink to comment#

    This is great.

    How would you make it resume play when the slide is not longer being hovered? ie, when the mouse is moved away and without a click on start?

  90. barren
    Permalink to comment#

    Hi. The best slider ever! Great work.

    But I have a little problem… I’m useing mootools at the same page and they crush each other (mootools with jquery).

  91. yy
    Permalink to comment#

    Hi,your work is so great!

    i got a little problem ,if i want change the height of the wrapper as to fit the new height of the current page,what should i do…

    • Mike
      Permalink to comment#

      Same problem here, not sure what to change.

      If all my photos are 600×450, what exactly do I change?

  92. Permalink to comment#

    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!

  93. larose
    Permalink to comment#

    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.

  94. Amadex
    Permalink to comment#

    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?!…

  95. Chas
    Permalink to comment#

    Hi Chris!

    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.

    Thanks for the very nice effect.

    • Permalink to comment#

      You just have to change the number to the number of the slide to which you wish to link.

    • Chas
      Permalink to comment#

      Thanks for your prompt response, Bryce.

      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.

    • Chas
      Permalink to comment#

      Hi Bryce.

      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.

      Thanks again for your reply.

  96. Permalink to comment#

    Wow! Fantastic slider. Just what I was looking for since I needed to be able to use HTML in the slides.

    Thanks Chris!

  97. Magnus
    Permalink to comment#

    I agree – WOW! Great work Chris!

    Two questions:
    If you refresh the page (check the demo), the bottom navigation bar is visible for like a millisecond.

    This only seems to happen in the IE browser (I know it sux but people are still using it).

    Changing the .wrapper overflow to “hidden” instead of “auto” seems to work.

    Q1. Would this have any negative effects ‘scriptwise’?
    Q2. Could it affect SEO, ya think?

  98. Wow cool :D

  99. Andrew
    Permalink to comment#

    hey,
    Just wondering if you could provide more details on resizing the slider and losing the bottom numbered tabs. I’m trying to fit it into area 800×200.
    Thanks

  100. Permalink to comment#

    Hi all,

    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??

  101. Victor
    Permalink to comment#

    Is there any way to have the navigation on the right hand side? Sort of like bu.edu?

  102. Agénor
    Permalink to comment#

    Can we hope to see a “fade” option anytime soon ? ():-)

  103. Fernando Suárez Carballo
    Permalink to comment#

    Where can I change the position of next-back buttons? I want to put them with the numbered list together. How can I do it?

  104. david knight
    Permalink to comment#

    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!

  105. Stephen Henry
    Permalink to comment#

    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

    http://web.mac.com/chezhenry/anythingslider/

    Must be a webkit problem traversing the DOM or with the elements array from JQuery. Any ideas?

  106. Nice script. I like it!

  107. Slizer
    Permalink to comment#

    Hi!
    Script is really nice!
    But what about Opera browser? It`s not working on it :(

  108. Aaron
    Permalink to comment#

    A few people have asked for some help in changing the tabs from numbers to different titles for each tab. Can anyone help me with the change in js that needs to be done?

  109. Sarah
    Permalink to comment#

    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?!

  110. Geo
    Permalink to comment#

    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

  111. Permalink to comment#

    Hi, It´s a wonderfull script, but I have one question, if I want to change the numbers to text, from each navigation tabs, what can I do?, I can change all of them, but not just one

  112. Permalink to comment#

    I want to know if there is a way to not show the star/stop buton?

    I set buildNavigation: false, and then the numeric bottunns gone, but star/stop is steal there!

    PS: very good script! A tryed to work with others scripts and didnt get. But this is sou wonderfull and easy to work! Very good work! Congratulations!!!!

  113. Kristy
    Permalink to comment#

    Chris this is awesome and exactly what I’ve been looking for. Does this slider work in PHP as well? Thanks!

  114. Permalink to comment#

    Has anyone made this work when sliding content of varying widths?

  115. Jacob
    Permalink to comment#

    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?

  116. Kannan
    Permalink to comment#

    Hi,
    Excellent code and explanation. I like your code and help. And,

    I am newbie in .net development.

    I have to develop a website which should support the page level slide transition over iPhone from 3G itself.

    Your sample is working within the page. I am looking for a sample to do the sample transition between different pages.

    Please share your sample code with me.

    I am waiting for your reply.

    Mail ID : dakannan@gmail.com

    Thansk in advance.

  117. Permalink to comment#

    Very good!
    Can I use like demo with link to you in my site?
    I am waiting for your reply.
    Thansk in advance.

  118. Joe
    Permalink to comment#

    Hey Chris,

    Thanks for this nice plugin. Regarding simple image slides, could one have a caption pop up, kinda like in http://www.catchmyfame.com/2009/08/27/jquery-infinite-carousel-plugin-1-2-released/ (also jQuery)?

    It’d be great if you considered adding this little feature. It would make everything just about perfect. Thanks!

  119. Permalink to comment#

    Hey, Chris

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

    Cheers, Mads

  120. banny
    Permalink to comment#

    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

  121. banny
    Permalink to comment#

    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

  122. Paul Bierton
    Permalink to comment#

    Thanks for this, its exacty what we need for a client. It would be nice if there was an option for horizontal or vertical scrolling but thats no biggy.

    on a side note, works fine in ModX once you sort the pathing out of the images etc, can even be used with chunks (ModX name of html snippets)

    Cheers again

  123. Amadex
    Permalink to comment#

    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…

    Tkx!

  124. mury
    Permalink to comment#

    Hi, first of all thank u so much!

    But I have a problem… When I have photos less than 10 there is no problem, but when I put like 25 it is not working properly? how come?

    • Paul Bierton
      Permalink to comment#

      Chances are your exceedeing the 9999px limit, i read something further up about it :)

    • massa
      Permalink to comment#

      can we increase this limit :)
      pliss pliss!!

    • massa
      Permalink to comment#

      ok of course I asked but the answer was easy. If you guys have the same problem open slider.css and in the line 25-26 change this .anythingSlider .wrapper ul {
      width: 9999px;

      into this

      .anythingSlider .wrapper ul {
      width: 99999px;

      I mean put the number up a bit :) and its done! Thank you Paul!

  125. massa
    Permalink to comment#

    after the number 13 its not working? why? (againn 13 stuff)

    if you want to try just copy paste this many times like 15! you will see that it is not working or lets say sliding after the number 13…

    how weird!

  126. banny
    Permalink to comment#

    dear chris my man:)
    we need another point rel maybe :)
    thnx for help:)
    and plz plz can u make a tut on how to make a plugin like that from scratch
    thnx a lotttt mate

  127. Permalink to comment#

    check out this websites having cool suff

  128. Ksenia
    Permalink to comment#

    Hello,

    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();
    });
    

    Many Thanks!

  129. Ksenia
    Permalink to comment#

    Never mind, I figured it out! Awesome work! :)

  130. Alan
    Permalink to comment#

    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.

    This happens in the latest version of ie, firefox, chrome and safari.

    I have the navigation buttons set to off.

    here is my script:

    <script>
        var updateCaption = function(slider){
            var cap = slider.$currentPage.find('.caption').html();
            $('#current-caption')
                .html(cap)
                .fadeIn(200);
        };
    
    $(function(){
        $('#slider').anythingSlider({
    
            autoPlay: true,
            buildNavigation     : false,
            buildStartStop      : false,
            hashTags            : false,
    
            // *********** Callbacks ***********
            // Callback when the plugin finished initializing
            onInitialized: function(e, slider) { updateCaption(slider); },
    
            // Callback before slide animates
            onSlideBegin: function(e, slider) {
            $('#current-caption').fadeOut(200);
            },
    
            // Callback when slide completes - no event variable!
            onSlideComplete: function(slider) { updateCaption(slider); }
    
        });
        });
        </script>
    

    I got this from the example on jsfiddle for external captions from the github page.

    Can anyone see something I am doing wrong, or can anyone else verify this?

  131. Agabe
    Permalink to comment#

    Hi! I have a big problem with the slider. When I add a div inside like this:

    Gospodarstwa Rolne
    Wyższe założenie ideowe, a szczególnie zmiana przestarzałego systemu finansowego spełnia.
    Sprawdź

    and css

    .slider {
    margin-top:-6em;
    position: relative;
    z-index: 1;
    overflow: hidden;
    }
    .slider .caption-container {
    left:10%;
    color:white;
    width: 30em;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 1.1em;
    }   
    

    the slide with div doesn’t resize. I tried different types of display and positon on div but it doesn’t make a change. Anyone can help?

  132. Agabe
    Permalink to comment#

    woops, the html above was in blocke code in preview but it somehow submitted as normal… here it is, hope this will display like in preview ;)

    <div class="caption-container">
    <h1>Gospodarstwa Rolne</h1>
    <p>Wyższe założenie ideowe, a szczególnie zmiana przestarzałego systemu finansowego spełnia.</p>
    <a href="rolnik.html"><button>Sprawdź</button></a>
    </div>

  133. adsd
    Permalink to comment#

    want to remove “#&panel1-3 ” such charcter from url ?
    Pls suggest solution

  134. Tami
    Permalink to comment#

    Hi, I have the anything slider in my website, and its just display 10 pics, I would like to display as many as I attached in the post. (it is in wordpress).

    How can I do that?

    here goes my code:

  135. Vladimir
    Permalink to comment#

    Hello everyone. I really need help with this one. How can I use this slider if the content is generated dynamically?

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".