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?

Sponsors

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.

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

    Great tutorial(s)!

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

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

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

    thnk u

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

    really helpful thnks a lot

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

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

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

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

    Thanks man :p

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

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

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

    <3

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

    Can you please fix the download links?

    Reply
  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

    Reply
  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 : //

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

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

    Reply
  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…..

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

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

    super ::D helpfull boy :D

    Reply
  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

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

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

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

    Brilliant……

    Reply
  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

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

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

    REEEEEEEEEEEEEEALY helpful , thanks

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

    what if we want the content to change automaticaly?

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

    No problem buddy! I am glad you enjoyed it!

    Reply

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

Categories



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