Coda-Slider 2.0

Finally, a brand spanking new version of Coda-Slider. Some links:

If you need help or troubleshooting, please register and ask in the Coda-Slider 2.0 forum.

Background

Coda-Slider is a jQuery plugin I first released in September, 2007. It aimed to mimic the slider effect on the promo page for Panic’s Coda software. That initial version was hacked together, and I made two small updates within a few months of its release. Coda-Slider 2.0 has been built from the ground up, and should prove much more versatile and easier to use than its predecessors.

License

Coda-Slider 2.0 is available for use in all personal or commercial projects under both MIT and GPL licenses. Pick your favorite and roll with it.

Save a Puppy

If you like Coda-Slider 2.0 so much that you’d like to part with some of your hard-earned cash, I’d appreciate any donation you can make to the Humane Society of Louisiana. You can donate via PayPal; just click the button on their homepage.

Learn jQuery

jQuery is quite easy to learn, especially if you know CSS already (you target elements the same way in jQuery). I learned by trial and error and plenty of visits to the online documentation. You can speed up the learning process by using the book Learning jQuery 1.3, which I reviewed here.

Comments ( 23 )

  1. Hello… Thank you for the script…

    Just wondering it’s possible to make the slide continuous… like jumping from the last panel to the first one going right… or the other way around like going from the first panel to the last going left…

    hope you understand… sorry for my english

    Nuno

  2. Niall DohertyNo Gravatar

    Hi Nuno. I understand what you mean. I considered adding that functionality, but the code needed to achieve it would have been significant. It is possible though with heavy modifications.

  3. Great work on v.2!

    Loving the new features :)

  4. Niall,

    I run into a problem when I try to display google adds within the slider. If you goto my site http://www.fellowshipofthereef.com you will see your old version of the slider, and it works nicely, but version 2.0 fails and when I check the error console on firefox, it complains of:

    google_protectAndRun is not defined.

    So after a little digging, I found:
    http://geek.littleredstring.com/17-load-adsense-last-jquery
    and
    http://stackoverflow.com/questions/1142861/jquery-append-google-adsense-to-div

    I’m still in the process of figuring it out (I’m more of an embedded developer – C,C++, etc)

    Just thought I would let you know that as of right now, it looks like having ads within the slider won’t work without a little extra work

    Jerry

  5. AmandaNo Gravatar

    This is fantastic, after searching for what felt like forever finally code and directions I understand. Very well written and concise! Thank you SO much!

  6. JonathanNo Gravatar

    Hi Neil,

    first i have to say that i’m new at this of using jquery. i’ve been having a problem with the slider, it gets veeeery slow when i load the panels Dynamically using php. The data that i use to get the content of the panels is product of a consult to a mysql database.

    Because of this problem the effect cannot be seen.

    i’ll appreciate ur help.

  7. Niall DohertyNo Gravatar

    Jonathan, try it just with static HTML first. If it works fine like that, then the problem is with your server or maybe the SQL query needs some work.

    If the static version is still slow, then send me a link and I might be able to diagnose the problem.

  8. Thanks Niall,

    This is just what I’m looking for. Simple and yet very powerful.

    I’m going to look forward to playing around with it tonight!

  9. ThomasNo Gravatar

    Hi Niall,

    I’m wondering. Is is possible to have transition between the slides, images. I helped my friend with his portfolio to show his work. URL: http://www.schallinger.se

    Thank you for a great slider!

  10. Niall DohertyNo Gravatar

    Thomas, I’m not sure what you mean exactly. You want an image to appear during the slide between panels?

  11. neoNo Gravatar

    Thanks for this awesome slider..

  12. Samuel BeekNo Gravatar

    First off: The new version of Coda-Slider is amazing! It is somehow smoother than the previous version and it definitely looks better. But I have a problem with it.. I explained it in a short video http://www.youtube.com/watch?v=oIssCLltroE
    Please watch it.. it would be great if someone knew how to solve it.

  13. Niall DohertyNo Gravatar

    Samuel, I believe you’re having the same problem someone else was having. Check this thread in the forums.

    Does that answer your question?

  14. Samuel BeekNo Gravatar

    Thanks, but no that’s not the problem.. I’m going to start a topic in the forums..

  15. sylverNo Gravatar

    2.0 v looks nice.

    Is it possible to make cross links for left and right button?

  16. jon riveraNo Gravatar

    Anyone know which setting I need to use to dynamically add the .current class, for selected items? I am using a custom nav/slider controls., and cant seem to figure this out.

  17. David LeonardoNo Gravatar

    Hello, this version is Awesome! but i have a question, it`s posible an slide inside another slide?? please help me… thnkx

  18. how can i put the arrows in the bottom ???

  19. AmandaNo Gravatar

    I’ve set up the slider here: http://philipfdeaver.com/ – I’m having issues in IE6 and IE7, the back button works fine but when the forward button is clicked it’s as if it’s clicked twice so that it goes backwards then forwards to the same slide. I’m fairly new to this and haven’t been able to find a solution anywhere, any ideas would be greatly appreciated.

  20. Thanks for your good work! I’ve got two notes on v. 2.0, first why do you prefer classes to ids in the script, as ids normally are faster than classes even with jQuery’s Sizzle Selector Engine? Is it to make possible many sliders on one page?

    The second one, I wanted to ask you if you perhaps thought on starting the name values with a letter, f.e. ‘a1′ instead of solely a number.
    Background: http://www.w3.org/TR/html4/types.html “ID and NAME tokens must begin with a letter ([A-Za-z])” — I know we are not very often on HTML4, but it’s not unlikely. And it helps preventing browser troubles.

  21. Edel JenningsNo Gravatar

    Hi Niall

    Thanks for sharing this. I am wondering how difficult it would be to have an alternative vertical slider to some pages, for subnav in you like?

  22. KNo Gravatar

    Okay, I’ve searched all over these blogs and forums looking for a solution to the Flash issue in Firefox. Can someone please point me to a solution? Everything seems to be working fine but the embedded Flash content appears outside the div when you first open the page (only in FF). Help!

  23. tcgNo Gravatar

    @K: Have you followed the example of embedding videos (on the Demos page, “Example 7: Videos within a slider”)?

    Adding the extra wrapper with a height set to the height of the Flash content should set you up. I’m only responding here, for the benefit of others that might find your question here in the comments. I’m not sure of the policy here, but I assume this kind of thing should probably be handled in the forums.