How to Build the Trendy New jQuery Sliders: New Premium Tut
plus

How to Build the Trendy New jQuery Sliders: New Premium Tut

on Aug 11th 2010 with 31 comments
Tutorial Details
  • Languages Covered: jQuery
  • Difficulty: Intermediate - Advanced
  • Estimated Completion Time: 1 Hour
Download Source Files

Final Product What You'll Be Creating

jQuery sliders are becoming more popular day by day; with more free and premium sliders pouring in regularly. Knowing how an advanced slider like this works is becoming a must. In this week’s premium tutorial, we are going to create a full-fledged jQuery slider which supports inline comments. Let’s get started! Help give back to Nettuts+ by signing up for a Premium membership.

Sample 2

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

This author has yet to write their bio.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • wizylabs

    Will join premium for this tut (when I get some money :D)

  • David

    The CSS in your tut relies on a class named “.JWslider” but in the HTML there is nothing with that class. Can you please explain that? The has an ID of “test” and then the list items with no ID or class.

    • David

      Nevermind. I see from reading much further along in the Tut that the class is created dynamically with jquery.

  • http://laroouse.com esranull

    good job but for premium Members

  • http://www.daniel-petrie.com Daniel Petrie

    Looks like a good tut. I look forward to going through this. I only wish it were a screencast :( but I guess everything can’t be a screencast lol.

    • Abhin Sharma
      Author

      I will try to give screencast on future tutorials :)

      • http://www.daniel-petrie.com Daniel Petrie

        That would be awesome. I just prefer screencasts because I seem get more out of them because you typically get explanations and demo’s along the way while it’s being built. Nothing wrong with articles though!

  • http://www.pixoliacreative.com Ray

    Nice!

  • cryx

    Do you have a preview for this for non-members? Just a small demo of what you’re creating?

  • http://www.itechroom.com iTechRoom

    Please place some demo for General People.

  • Matt27

    Pretty good tutorial and i’m glad you have made a tutorial on how to create a slideshow from scratch. there are a few things missing in this tut that i’d have liked to have seen though.

    1. I’d like it to be easier to set which effect you want on the transitions so it doesn’t just chose from a selection.

    2. It would have been nice if there was just a simple fade effect between slides. personally i think that a lot of the more complex transitions look a bit gimmicky.

    anyway, it is a good tutorial. but for those with not that much javascript knowledge, its very hard to customise this slider to do what you want.

    (if someone could let me know how you set which transitions to use i’d be a happy person! :D )

    • Abhin Sharma
      Author

      Hi, glad you like the tutorial… in the tutorial I have mentioned option effect , if you give it a numeric value between 0 to 5 only that transition ( based on switch’s case no ) will be repeated, I should have been more detailed on that and for the fade option here is the code …

      case 6:current.find(“img”).fadeIn(“slow”,function(){

      endeffect($(this));

      });

      also be sure to change var ch = Math.floor(Math.random()*7);

      • Matt27

        Thank you so much, and no, not your fault. more my lack of knowledge of javascript and lack of time to tinker around with it myself. thank you for this info :) i will have a play around when i have time. and will probably use this in a project i’m currently working on :)

  • cahva

    Very nice tutorial. Love the effects!

  • ben

    You should provide the final product demo to all users. If they see it in action and really love it, they may be more apt to sign up for a premium membership.

    • http://www.infrasoundkids.com L1

      I agree

      • Ben-

        Though I’m already premium member, I agree as well.

  • http://shawntysco.com Shawn Tysco

    Love it, written well. I dont mind spending the extra cash a month (on my low income) on the premium service. I have to admit, I believe I learned more here than when I took my bachelors. Good thing I am going for my MBA, but I will always enjoy coding.

  • Ben-

    I thought a screencast is a condition for a premium tut? :( Anyway, good job and thanks!

  • http://www.crearedesign.co.uk Steve Maggs

    As the first comment said, worth joining premium for, which I’ll do now, the tutorials keep getting better and more valuable so no problem justifying the charge.

    Can’t wait to do this…

  • http://www.shaneparkerphoto.com Shane Parker

    For those complaining about not seeing a demo, I’m not sure how one would go about creating a demo and keep people from ripping off the code. Obviously, if you post a demo the js/css/html are all available to the browser, so it’d be easy to steal this without having to pay for the Plus tutorial.

    • http://www.shaneparkerphoto.com Shane Parker

      …although I guess he could do a screen recording and post the video.

  • http://www.websitetemplates.bz/ Best Website Templates

    Excellent tut – excellent post

    Thanks for sharing

  • Pete

    Awesome tutorial. Thank you.
    I do have a tiny request though (if that won’t be too difficult of course).
    I’m still a beginner with web design, but I was wondering if it would be hard to modify your slider to have each image be a hyperlink that could link to a different web site?

    Cheers.

  • monsoon

    Its a fantastic slideshow, not only are the effects great but incredibly smooth, well done! Its easily customiable to fit different sized images.

  • Jon

    Not sure if anyone can answer this, since it’s been a while since this came out, but some of the transitions are not working for me. Is it a problem with jquery 1.4.4 and this script?

    • John

      Hi Jon
      I’m having the same problem but with jQuery 1.6.2 did you find a fix for 1.4..4 if so could you tell me what the problem was, thanks