The Story of a Tabbed Slider
I thought I was in a bind when one of my clients wanted some specialized functionality in their jQuery slider. First, I had used jQuery UI Tabs to create an image slider like this:
The images would cycle through in the large area, and then the “tabs” on the side would allow you to switch between slides. I also had an effect that would highlight the tab for the currently active slide. I thought it was a great slider, until I had to change the functionality.
Changing the functionality of a slider using jQuery UI Tabs is near impossible. Why? Because of the many add-ons I had to find and implement to even get the tabs to work as a slider. If you’re thinking of using jQuery UI Tabs to make a tabbed slider, just forget it. TRASH THAT IDEA. Don’t look back.
The solution is all within Cycle2.
Advanced Slider Functionality
The slider examples on the homepage are pretty, but for the real meat…the real, heavy-duty functionality…you have to go into the demos. Oh. My. God. The functionality!
The goal from my client was a tabbed slider. The slider needed to be controlled by hovering over the tabs. Hovering over the tabs paused the slider. Clicking the tabs would go to a different page (a function I’ve never seen in another slider).
I tried doing this with jQuery UI Tabs. It didn’t work.
I went and looked at Cycle2, specifically the pager demo. As I continued to look, I found the Per-Slide Template. The Per-Slide Template has <a> tags in it? Gasp, I wonder if this could work for me?!
…
It did.
And it is amazing.
I just had to apply the styles I had previously to make the links look like tabs/link boxes to the new pager items. Everything works. Everything is gorgeous. See the slider in action here.
I don’t think I’ll use any other jQuery slider script. This is the mecca of them all.
