Grow your CSS skills. Land your dream job.

AnythingSlider 1.4

Published by Chris Coyier

Since the AnythingSlider has been on GitHub, a number of people have pushed the project forward. Big props to ProLoser, Mottie, meancode, betzster, and kalasoft for committing code to make it more feature rich, smarter, and more optimized.

Mottie's fork is the furthest along so I'll link the download button below to that. There has been lots of changes since last time we talked about this project around here. For example: multiple sliders on the page (while retaining ability to link to slides on either with #hash links), morphs size to fit uniquely sized slides, reversing the direction of the slider, and many more behavior options.

View Demo   Download Files

Update August 2012: As of this date Anything Slider is in version 1.8.6 and still going strong!

Comments

  1. Permalink to comment#

    Looks pretty neat.
    Good jobs guys.

  2. DaveC
    Permalink to comment#

    is this also available as wordpress plugin? would be nice…

    • djanes376
      Permalink to comment#

      I don’t believe this exists as a wordpress plugin however there are some plugins that have similar functionality. If you really really want this implementation of the idea you can certainly integrate it with wordpress if you are well enough versed in theme building.

  3. Great updates to an awesome slider, thanks for sharing!

    I loved the last one so much I customized it for use in the portfolio section of my site, you can check it out here – http://www.curtisscott.com/portfolio.html

    Thanks again to all those who were involved with this latest update. I look forward to examining this version and checking out all the new features!

  4. I don’t think the demo is working anymore. It simply lists all slides in a UL on the page. Am I missing something?

  5. Permalink to comment#

    I just updated AnythingSlider to v1.41 – now with themes! I added a demo here.

    Disclaimer: I don’t claim to be a graphic artist so please bear with me and my crappy themes. Also, the minimalist-round and minimalist-square themes look the same in IE because I used border-radius. I’d also like to know if I could copy Curtis Scott’s theme and provide it with the base files :)

    • Please feel free to copy my theme into your release.

      Thanks again for all your hard work on this latest release. It would be nice to have a credit/link back to my site, but this is not necessary for use. :)

  6. O'Ryan
    Permalink to comment#

    perhaps its my browser but FF 3.5.13 on an XP machine does not hide the youtube videos after they slide out of the viewing area?
    hmm but in chrome it works wondrous.

  7. Looks pretty nice, will use in some of my Drupal Themes, thanks for gr8 plugin update :)

  8. Giedrius
    Permalink to comment#

    For the first time I launch demo page on newest version of Opera it was a mess, I had to reload the page to see everything. And of course the same problem with youtube videos still was.

  9. Definitely a big improvement. Nice job !

  10. really nice and helpfull

  11. This works wonderfully. I have always liked the “anything” slider and now it features electronica from Carl Sagan! Who could as anything more?

  12. Permalink to comment#

    Wow they’ve done a wonderful job. I, too, use your anythingSlider. I should update!

  13. Permalink to comment#

    Great work, the panel resizing option is really awesome !

  14. DeSha Rogers
    Permalink to comment#

    I love this. The only thing that I don’t see that I would find helpful is an option to start on a random slide. Can anyone help me with this. Thanks.

    • Permalink to comment#

      Hi DeSha!

      Try something like this in the initialization code:

      $('#slider1').anythingSlider({
      startPanel : Math.floor(Math.random()*5)
      });

      The “5″ should equal the number of slides you have

    • DeSha Rogers
      Permalink to comment#

      Thanks Motti!!!

    • Jamie Ross
      Permalink to comment#

      Hi Mottie,

      Great slider! Would you mind explaining to a newbie like me how exactly to add the above code into the initialization code?

      $(‘#slider1′).anythingSlider({
      startPanel : Math.floor(Math.random()*5)
      });

      Thanks in advance!

    • Permalink to comment#

      Hi Jamie,

      Actually that code is the initialization code. The “startPanel” is just one of the many options (key), the setting of the option is called the “value”.

      Most plugins are initialized in the same manner:
      $(target).plugin({
      key1 : value1,
      key2 : value2
      });

  15. Matthew VanTassel
    Permalink to comment#

    I’ve been using this slider for a long time and I love how flexible it is. I find that I use it for such varying projects but I need to modify it to suit my needs regularly. These modifications would not be needed if there were callback functions in place I could utilize.

    Could a future version include callback functions at the logical points? Start, stop, begin and end of transitions?

    Keep up the great work!

    • Permalink to comment#

      In the latest version (1.43), you can bind to triggered events. I’ve included examples on the main index page (demo here). I know these aren’t callback functions, but hopefully it will fulfill your needs.

      Oh, also check out the firebug console on that page, it lists the events as they occur.

  16. Permalink to comment#

    Nice post you done very well work
    and Im also do on it daily  WEBDESIGNING & BLOGGING

  17. John Hu
    Permalink to comment#

    only click event!
    not hover event!

    • Permalink to comment#

      Hi John!

      I’m not sure exactly what you are asking for, but in the current version (1.43), new interactivity options have been added. Add “mouseenter” instead of “hover” to whichever element you want – download it here

  18. Great work.I specially liked the Optionally resize functionality.

  19. Permalink to comment#

    wow that’s very cool i like effect on right left navigation buttons

    :)

  20. Wow, great work, looks fantastic

  21. RichyVn
    Permalink to comment#

    Hi You all,

    Is it just me or what?
    But when I go and download the new 1.4 version its still say its version v1.3.7.0?
    I can’t seem to find the right version anywhere.

    Like i said its probably just me or maybe because its monday???
    Maybe someone can point me in the right direction please?

    Regards,
    Richard

  22. Alfredo Canales
    Permalink to comment#

    I can’t seem to find version 1.4 anywhere also. Can anyone help ?

    • Permalink to comment#

      Download it from my github page (current version 1.43)

    • RichyVn
      Permalink to comment#

      Okay where do I click on that page?
      If I choose the “Download source” button on the right top, I get 2 options to pick from: Zip or tar. I picked the Zip file.
      Now when its downloaded the file name is: Mottie-AnythingSlider-v1.3.3-15-g64717d7.zip !?

      So like I said: Is it just me or am I still doing something wrong here?

      Regards

    • Permalink to comment#

      Hi RichyVn!

      Just ignore the file name… I don’t think I have the tags set up properly (still learning github). But I do see that ProLoser has updated to the latest version and he’s good at adding tags/filenames :P… Either way, check the version number in the .js file to make sure which version you have.

  23. vicky
    Permalink to comment#

    you are my favourite jquery&css ninjas :-)
    thanks for all the great work!

    i have a noob question though:
    posted on the css tricks forum weeks ago, but i’ll ask here again:

    http://kostov.de/allegro/index.html#

    this is the page iam currently working on.

    following problem occurs:

    in Chrome and Safari, the arrow-buttons are sliding up and down on hover, instead of just hovering – my guess is that they are getting activated by another script – is there a way to avoid conflict? or is it just the sprite?
    i havent tried uisng separate pics yet …

    thanks! love the banjo,chris!

    • Permalink to comment#

      Hi Vicky!

      It looks like a CSS problem and the animation is due to the CSS3 transitions. So try replacing the following CSS:


      .anythingSlider .arrow { display: block; height: 30px; width: 20px; background: url(http://kostov.de/allegro/img/arrows_slide.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 79px; cursor: pointer; }
      .anythingSlider .forward { background-position: left top; right: -22px; -webkit-transition-duration: 0; }
      .anythingSlider .back { background-position: right top; left: -18px; -webkit-transition-duration: 0; }
      .anythingSlider .forward:hover { background-position: left bottom; }
      .anythingSlider .back:hover { background-position: right bottom; }

    • vicky
      Permalink to comment#

      Thanks , Mottie!
      I just came to the conclusion as well, right after I woke up :-)
      It’s the CSS3 transitions…!

      Thank you so much for the code!!! I will try it out and let you know!
      Was already thinking of rewriting the CSS for the “a”s with sprites ….

      Should have done my homework first and read: an August 12th article from Louis Lazaris on Impressivewebs “Animated Sprites with CSS3 Transitions” …

      Thanks a LOT!

    • vicky
      Permalink to comment#

      Thanks again, Mottie!

      Both works:

      Your CSS to the anythings.slider &
      changing the transitions gives the same result:

      a{
      color: #e1661e;
      text-decoration:none;
      -webkit-transition: background 0.5s ease-in-out;
      -moz-transition: background 0.5s ease-in-out;
      -o-transition: background 0.5s ease-in-out;
      transition: background 0.5s ease-in-out;
      }

      Will remember for the future!

      Carl Sagan rocks! :-)

  24. Excellent jQuery content slider, and the panel resizing option is very smooth, very versatile. LT

  25. Useful plugin.. Thanks to post it

  26. OOh. Very good.
    It is very usefull.

  27. Permalink to comment#

    Good job!
    Thanks for sharing it

  28. rne1223
    Permalink to comment#

    It doesn’t display correctly when use with blueprintcss framework. Here is a screenshot: http://www.flickr.com/photos/54393716@N08/5056143023/

    I’m testing it with v1.43 from mottie.

    • rne1223
      Permalink to comment#

      Fixed :)… good luck figuring it out guys…

    • rne1223
      Permalink to comment#

      SIKE…LOL

      The problem was that blueprintcss adds padding left for ordered list of 1.5em. I believe they do this to keep the fonts nice and align. Anyways, just change the current anythingslider.css ul to:

      ul.anythingBase {
      background: transparent;
      list-style: none;
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding-left: 0;

    • Permalink to comment#

      Thanks! I added “padding: 0″ to the latest version :)

  29. Alvaris
    Permalink to comment#

    Sincerely thanks for the slider, as a weak developer i appreciate this very, very much.

    However (lol sorry), when I click on the forward button to slide from panel 3 to panel 1 (continuous effect) several times in IE7 and IE8, the panel 1 seems ‘flickering’ like it’s shifting from panel 3 to panel 1, this phenomenon only happen within 1 second.

    Strangely, clicking previous button do not trigger issue.

    This also happen with both sliders in the demo, you can click on the forward button to slide from panel 3 to panel 1 several times in IE7/ IE8 to observe the issue.

    Any recommendation for fix is much welcome, thanks! :)

    • Alvaris
      Permalink to comment#

      Oops I’m sorry about the panel number, I actually means from last panel to first panel.

      Thanks!

    • Alvaris
      Permalink to comment#

      and for ‘previous button’ I mean ‘backward button’, ouch! sorry for spamming X)

    • Permalink to comment#

      I think I fixed this problem in the latest version (1.4.5)… if the issue still occurs, please submit an issue so we can better track it.

    • Alvaris
      Permalink to comment#

      Thanks Mottie, tested 20 times for IE7 and IE8 and it works correctly, you rock! :D

  30. Hiya Chris.
    This is a great plugin, however I am currently using this in a fluid site, so if the user resizes the window the width that get set are no longer valid.

    I am calling a function on window.resize. I got it mostly working by doing this however when trying to set the width on the div that wraps the with the class of anythingSlider, as soon as the value is reset with the window resize and the slider moves onto the next slide it resets the width to the previous value.

    So I was wondering if this is even possible to do or not?
    I have put my code snippet for the function below.

    Cheers,
    Warren :)


    function updateCarouselWidth() {

    //Get width of mainColumn
    var mainColWidth = $('#mainColumn').width();

    //Update width to mainColWidth - Hmm?! This gets reset again when moved to next item
    $('div.anythingSlider').width(mainColWidth);

    //Count number of items in - eg 3 + 2 cloned items will be 5
    var numberOfItems = $('#carousel > li').length;

    //Update width of carousel to mainColWidth * numberOfItems
    $('#carousel').width(mainColWidth * numberOfItems);

    //Update width of 's to mainColWidth
    $('#carousel > li').width(mainColWidth);

    //Update width of div.panel inside 's to mainColWidth
    $('#carousel > li div.panel').width(mainColWidth);
    }

    • Permalink to comment#

      Hi Warren Buckley!

      This has been an issue with the slider from the beginning. In future versions, I may add this as an option.. or just try to detect a percentage width. But here is a demo of a work-around with the latest version of the script from my github page.


      $(function () {
      $('#slider1').anythingSlider({
      startStopped : true, // If autoPlay is on, this can force it to start stopped
      });

      var timer;
      setSize();
      $(window).resize(function(){
      clearTimeout(timer);
      setTimeout( setSize, 100);
      })
      function setSize(){
      var w = $(window).width() * .8, // set to 80% of window width
      as = $('#slider1').data('AnythingSlider'),
      leftEdge = 0;
      $('.anythingWindow, #slider1 li.panel').closest('div.anythingSlider').andSelf().width(w);
      for (var i=0; i < as.pages + 2; i++) {
      as.panelSize[i] = [w, as.panelSize[i][1], leftEdge];
      leftEdge += w;
      }
      $('.anythingBase').width(leftEdge + 100);
      as.gotoPage(as.currentPage);
      }

      });

    • Hi Mottie
      Thanks for the fix, really appreciate it.
      However I think this should be part of the core to work with %widths so it can used easily in fludi layouts.

      Thanks,
      Warren :)

    • Permalink to comment#

      Hi again,

      I am considering adding this to the core, but I need some input on how to implement it (see this issue: http://github.com/ProLoser/AnythingSlider/issues#issue/18)… I personally don’t like the way it jumps on resize, but I don’t think that can be helped.

  31. Colin Léger
    Permalink to comment#

    Love it Chris~!

    My peeve with this slider (and the one I currently use) is the one issue with the embeded Youtube video.

    So the slider moves from one to the other, ~smooth~, then the turkey video comes up so I click it. Just like spinach on someone’s teeeth, I move my mouse cursor away from the stage/video area. This is when the video keeps playing and the slide starts-up again but the video isn’t done!

    I know (or don’t know) that youtube has a way of communicating the end of the video so we can have the option of starting the slider again.
    Next option is to have a wrapping div around the staging area that would stop the slider (not just hover) and listen for a clic and stop the slider. I guess this would leave us hanging and would then need a (continue to) play button.

    • Permalink to comment#

      Hi Colin!

      Actually this functionality has been added, but sadly it’s not working properly in IE. As far as I know it works fine in other browsers. I’ve been trying to fix this problem for IE, but it might end up that the swfobject javascript file will be a required plugin.

  32. Thanks for this awesome Plugin!
    I have a little question: Is it possible to have slides with different heights? So that the slider changes his height to the current slide’s height, after the animation has finished?

    Thanks for a reply.

  33. Jeremy
    Permalink to comment#

    I have an issue where flash on the last slide (and only the last, there is similar flash on 3 other slides) shows briefly and then is replaced with the alt content. If I add an extra after the slide that isn’t working (to make it second to last) then it will work. Any thoughts? See example here. In this example there isn’t the extra after the non-working slide.

    Thanks!

    • Jeremy
      Permalink to comment#

      That should say extra <li>… Thanks for an amazing plugin by the way.

    • Permalink to comment#

      I think what is happening is that when AnythingSlider is run, it duplicates your the audio player dynamic code “AudioPlayer.embed(“audio_1″, {soundFile: “#”});” which isn’t initialized in the extra panels.

      So, I think a simple fix would be to try running your audio player script before the anythingSlider initialization code (maybe even move it to the bottom of the page).

  34. Warvin Barker
    Permalink to comment#

    Hi Colin!

    Thanks so much for sharing. This is just awesome and it can be used in lots of great ways.

    Your fabulous work is MUCH appreciated!

    Sincerely,

    -Warvin

  35. Valentin
    Permalink to comment#

    It’s OK in IE but does not work correct in Mozilla Firefox … is it something wrong with my browser (version 3.5.13) ? Or it is “IE only” script ?

  36. Hey Chris, this is a great slider. I recently downloaded this and started using its basic functions in some of my sites, mainly to replace what I previously used flash for. I have also shared it with a couple of my work colleagues who have found great uses for it too, being able to have different types of files in one slider is great. Thanks for supplying some nice demonstration examples as well.

  37. Permalink to comment#

    Such a great slider! With little knowledge of html and css you can do anything with it.
    Easy to use in WordPress aswell.

    • Zaka
      Permalink to comment#

      How did you set it up in WordPress? Does it work in HTML5? Because mine just acts as if the jQuery isn’t affecting it – showing as an unstyled list.

      And yes, I have javascript enabled in my browser.

    • Permalink to comment#

      Its not HTML5.
      If the jQuery is not working, make sure you refer to the right documents.

  38. Permalink to comment#

    Great find, can’t wait to use this.

  39. Permalink to comment#

    Could anyone help me with a problem? I have put the jquery slider on this page:
    http://www.midians.com/test/index.asp

    I have tested it in Opera, FF, Safari, Chrome and IE. Of course I have an IE problem. It will usually load properly but not always. Sometimes portions of the background are missing. If it does load correctly and I hit reload it will often not load all of the background. As soon as the mouse moves the rest of the background will load.

    • Permalink to comment#

      Also, I forgot to mention that if I block out the javascript text contained in the tags in the header (the code that sets the parameters) the problem is no longer present.

    • Permalink to comment#

      Hi Kelly!

      It looks like you are using v1.3 with the newer HTML template. Download the newest version here and follow those examples (it shouldn’t need a div named “anythingSlider” or “wrap” anymore – it adds those automatically)

    • Permalink to comment#

      Thank you for your reply. I will give this a try!

  40. This slider is really nice! I love the way second one adjusts the the size of its content, I haven’t seen any other other sliders that can do that, Ill be using this for sure!

  41. Zaka
    Permalink to comment#

    Can someone give me a step by step instruction to even get this working?

    Mine is showing an unordered list of images(the auto-formatting isn’t kicking in). I have javascript enabled.

    I’m trying to use it in an html5 wordpress theme – no luck! Was there ever any instructions given with this slider?

    Thanks!

  42. Permalink to comment#

    I just tried to download at GitHub in front of my class and the .zip file wouldn’t download. http://github.com/ProLoser/AnythingSlider/downloads

    @Zaka check out my screencast on how to install it http://drho.ro/learn-javascript-and-jquery-web-design-tutorials-resources/

    • Permalink to comment#

      I left a comment on your tutorial site… nice job :P

      The one thing I wanted to add is that when you initialize AnythingSlider, make sure you include the themeDirectory in the code to make the other themes work properly in WordPress:

      $('#slider1').anythingSlider({
      themeDirectory : '/css/theme-{themeName}.css'
      });

    • Permalink to comment#

      Oops – no way to edit my last comment:

      $('#slider1').anythingSlider({
      themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
      });

  43. Thanks for bringing the improved slider to my attention. I will try it out tonight.

  44. Very smart and unique, Thank you for sharing.

  45. Permalink to comment#

    Awesome slider! I’m really digging this one. Will definitely continue using in future projects.

  46. Tae
    Permalink to comment#

    this is one of the most flexible slider plugins i’ve seen yet – thank you for your work!

    would like to throw out some feature requests if you don’t mind..

    html-friendly captions on translucent background color that slide up once a slide is loaded

    fade effect for navigation elements

    option for slides to reverse direction when going from last to first slide

    ability to click to next slide before transition effect finishes for better ux

    easy bullet or thumbnail navigation – i’m guessing it can already be done but easy options would be great

    thanks!

    • Permalink to comment#

      Hi Tae!

      The latest version on github includes an FX extension with examples on how to add thumbnails, effects on internal content and captions.

      As for your other feature requests, I’m not sure what you mean by “easy” bullet or fade effect for navigation elements (the navigation tabs/buttons?). I would appreciate if you submitted an issue at the github repository to make it easier to keep track of feature requests and bugs. Thanks!

  47. Permalink to comment#

    thanks for cool slider. I have been for this for quite some times.

  48. Permalink to comment#

    Thanks for sharing. But i have a “noob” question:

    Is it possible to edit the navigation bar? “Anythingcontrol” or “Anythingwindow” are hidden in the source code and i can’t find “thumbNav” class. I can see those only in the live code (Dreamweaver)… and is not editable!

    I want to create a Navigation Bar instead of the actual… i’m desperate XD
    (and i’m a beginner!… please don’t kill me ahahahah)

    =)

  49. donny
    Permalink to comment#

    Is it possible to make the slider switch between 2 different groups/gallies of photos. Like have a couple of tabs to click between.

  50. newbie
    Permalink to comment#

    sorry, I’m not good in english, and I’m noob.

    I have installed this on my wordpress. It’s only work on homepage but got the problem on other pages. Help me please.

    This is homepage, it’s work > hxxp://www.bestpricesdeal.com
    and others got problem like this > hxxp://www.bestpricesdeal.com/about/

    • Permalink to comment#

      I’m not good with WordPress, but I’m not sure what you mean by a problem… is it the theme? Did you try changing the theme directory?


      $('#slider1').anythingSlider({
      themeDirectory : '<?php bloginfo('template_directory'); ?>/css/theme-{themeName}.css'
      });

  51. Stephen
    Permalink to comment#

    Great slider! One quick question…is it possible to control the slider if embedded in an iframe? That is, put the slider in an iframe and a menu system outside of that iframe.

    Thanks!

  52. Hi, Mottie, this script is really really great. Tested on IE7/8, Firefox and Chrome. No problem at all. Not a bug but got a thing, IE made it trouble for me, when you set, “buildArrows : false” and “toggleArrows : true”, IE stops with a javascript error. But I have a question, couldn’t find how to not to stop animation when i click a link in .
    when i click the link in the panel, the link opens ina new window but the slide stops. Can i prevent this?

    • Permalink to comment#

      Hi Kürşad ÇAKIR!

      Ok, I fixed the first problem you mentioned. But I don’t understand what you mean in the second one – the HTML you posted is missing. Could you please submit an issue with the problem and which animation are you referring to – the panel, arrows, navigation panel? Thanks!

  53. m
    Permalink to comment#

    thanks for this!

    how does one create external controls? i don’t fully understand your instructions there.

    thanks.

    m

  54. Thanks for the great plugin.

    I’m not quite sure how to update the slider, I’ve updated my html but refreshing the page doesn’t update it.

    I’m also not exactly sure how to use this code – do i add my new in here and leave it at the top of the page rather than adding it into the html with the rest on the page?

    Thanks very much,
    mike

  55. Sq78
    Permalink to comment#

    Hi,
    Excuses for my bad english…

    I try to customize AnythingSlider v1.4.
    It’s work fine but I want to hide the numbers of slides (in left bottom) and the button Start/Stop (in right bottom).
    Can you help me please ?

    Thank’s very much

  56. Sq78
    Permalink to comment#

    Hi,

    I made a slideshow with AnythingSlider 1.4
    It will search images in a database with a mysql query.
    It works very well but I wonder if it is possible to preload the images (or at least a few) before starting the slideshow.

    Thank’s very much

  57. Pedro
    Permalink to comment#

    Hi,
    I implemented the slider, but is giving an error. The first time I open the site in the first position of the slider appears the contents of the last position.
    Have anyone else had this error?

Leave a Comment

Current day month ye@r *

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