Uploaded June 2014 | Updated September 2026, 1 week ago

---

In this jQuery Tutorial, we're going to be building a jQuery Image Slider Widget. There are lots of great jQuery slider plugins out there that have way more features and real-world testing, but this lesson on building one will help you understand jQuery programming a lot. We'll also introduce the concept of "DOM caching" - searching the DOM as little as we possibly can and then saving the results for quick-access later. Let's get into this jQuery Tutorial

View the source code here: jsfiddle.net/EjZzs/15

Lesson #1: jQuery Tutorial for Beginners
youtube.com/watch?v=hMxGhHNOkCU

Lesson #2: Listen to user events and respond with jQuery actions!
youtube.com/watch?v=G-POtu9J-m4

Lesson #3: Clean up the jQuery by putting some data in the HTML
youtube.com/watch?v=Cc3K2jDdKTo

Lesson #4: "DOM Traversal" with jQuery
youtube.com/watch?v=LYKRkHSLE2E

Lesson #5: Building a jQuery Tab Panel Widget
youtube.com/watch?v=1nWrIBB_bMA

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
youtube.com/watch?v=fgOO9YUFlGI
-~-~~-~~~-~~-~-