jQuery Content Slider – Part 2

24th of November 2013 25

jQuery Content Slider – Part 2

This is the second part of a two part series where we build a step by step content slider. In this tutorial we go over the main jQuery animation and function…

Filed under § jquery sliders — Tagged with , , ,

Share it!

Was it good for you to?


Support for the site!

No sponsors at the moment.

25 great comment(s) for this post

  1. MichaelLevyVt 12:23 pm 24/11 of 2013

    Thank you for the animation example.
    Your tutorial only works if you know the number of elements in advance. It
    would be more elegant and more flexible if all the code was contained in
    one place without onclick triggers.

    For example:
    $(‘.progress-container a’).click(function(){

    //get index of link
    //calculate margin by multiplying times the index
    //show content with corresponding index


    Using this strategy would enable you to add more slides without ever
    needing to touch the javascript again.

  2. Kate Dolan 12:35 pm 24/11 of 2013

    Great tutorial(s)!

  3. Alimon Pito 12:45 pm 24/11 of 2013

    sir, please give some tutorial on jquery shadow plugin.Thanks for your
    awesome tutorial……:)

  4. Kavyakumar K 1:30 pm 24/11 of 2013

    thnk u

  5. Kavyakumar K 1:51 pm 24/11 of 2013

    really helpful thnks a lot

  6. Jochem Oldemans 2:03 pm 24/11 of 2013

    Great tutorial! I’ve learned a lot of it :) I have 2 questions though.
    First, how do you get images slide in continuos? So there’s no white space
    between them. Second, can you make an extra tutorial what shows how to
    create captions right on the images?

  7. vinod kumar 2:49 pm 24/11 of 2013

    Thank you so much. Nice video. It is very useful.

  8. Helping Develop 2:54 pm 24/11 of 2013

    Thanks man :p

  9. Toby Hodkinson 3:22 pm 24/11 of 2013

    Where are the source files? I just installed ilivid and still didnt get

  10. oCodePanda 3:24 pm 24/11 of 2013


  11. Em SeeD 3:37 pm 24/11 of 2013

    Can you please fix the download links?

  12. Richard Harper 3:40 pm 24/11 of 2013

    Hi m8 just use the “title” tags in the divs like this: title=”look at
    this:)” you can even add html and css in it :) hope this helps

  13. jessejoeyjames 4:31 pm 24/11 of 2013

    Ah nevermind I figured it out. I didnt implent the Jquery script in a
    proper way. Forgot h t t p : //

  14. Richard Million 5:22 pm 24/11 of 2013

    So far, you are the most organized tutor on youtube.

  15. Manuchar Kereselidze 5:57 pm 24/11 of 2013

    Quite easy tutorial to be learned, but I’ve got a question, how to make it
    to be animated automatically…..

  16. MisterPrototypeX 6:56 pm 24/11 of 2013

    After everything it wasn’t working. One one occasion i spelled selectStep
    as selecrStep. Took me half an hour to find that. I just love how annoying
    coding gets.

  17. faik vural 7:49 pm 24/11 of 2013

    super ::D helpfull boy :D

  18. Toby Hodkinson 8:45 pm 24/11 of 2013

    i added $(“#content” + n).fadeIn(); instead of $(“#content” + n).show(); so
    the content fades in

  19. Tom Erbe 9:27 pm 24/11 of 2013

    no problem, you have a guaranteed subscriber for life :)

  20. Mark Grainger 9:33 pm 24/11 of 2013


  21. Tom Erbe 9:39 pm 24/11 of 2013

    Thanks the was an amazing tutorial. I have been trying to find something
    like this for a long time. Thanks again

  22. jessejoeyjames 9:53 pm 24/11 of 2013

    Hey man first of all very helpful and thank you, but after following the
    tutorial step by step I’m stuck at the point of the animation. I think I
    got all the codes right but when I click on “2″ or “3″ nothing happens.
    Also the source code isn’t available anymore so it’s hard to compare my
    code to yours to find any mistakes. So I hope you could help me out a bit
    or post the source code again. Thank you very much!

  23. Borhan Otour 10:32 pm 24/11 of 2013

    REEEEEEEEEEEEEEALY helpful , thanks

  24. Timurtek Bizel 10:42 pm 24/11 of 2013

    what if we want the content to change automaticaly?

  25. Helping Develop 10:43 pm 24/11 of 2013

    No problem buddy! I am glad you enjoyed it!


Your opinion matters. Add it below.

Tip: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Recent comments


Copyright jqueryui.info since 2010. All rights reserved. Design and the Absolute Theme by Tommie Hansen.