How to Build the Trendy New jQuery Sliders: New Premium Tut
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.
Join Net Premium
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!
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Onvo Media - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Will join premium for this tut (when I get some money :D)
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.
Nevermind. I see from reading much further along in the Tut that the class is created dynamically with jquery.
good job but for premium Members
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.
I will try to give screencast on future tutorials :)
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!
Nice!
Do you have a preview for this for non-members? Just a small demo of what you’re creating?
It’s probably something like this: http://tutorialzine.com/2010/03/mosaic-slideshow-jquery-css/
They are completely different, mosaic one is css3 based slideshow with 1 effect … this one has 6 effects and with controls
I think it’s something like the NivoSlider.
Maybe is something like this:
http://www.crysfel.com/demos/slider/index.html
Best regards
Please place some demo for General People.
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 )
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);
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 :)
Very nice tutorial. Love the effects!
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.
I agree
Though I’m already premium member, I agree as well.
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.
I thought a screencast is a condition for a premium tut? :( Anyway, good job and thanks!
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…
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.
…although I guess he could do a screen recording and post the video.
Excellent tut – excellent post
Thanks for sharing
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.
Its a fantastic slideshow, not only are the effects great but incredibly smooth, well done! Its easily customiable to fit different sized images.
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?
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