Numbered Tabs with Liquid Slider

This time around, we’re going to explore how to get numbered tabs with the slider, an option unavailable by default. Basically, we want something like the following:

Each of our tabs are numbered 1,2,3 instead of using the default title of the slide or some other text. Firstly, you’ll need to get Liquid Slider all setup. Kevin’s site explains that all quite clearly and it’s beyond the realm of this post. Once you’re setup, you should have some HTML that looks something like this:

Note that I haven’t set those <h1> tags to have the usual class="title". Instead, I dropped a <span> tag in their and gave it a class="nav-number". We’ll tell Liquid Slider to use that span instead of the default title of the slide.

In the example above, I’ve simply said “Don’t load the dynamic arrows”, since that’s not the type of nav I want to implement here, and “use the .nav-number class to define what each tab should read”.

And with that you’re all set.

Getting it to Work with WordPress

Of course, I’m all about WP over here, and every time I implement Liquid Slider, it’s going to be in a WordPress environment, using custom post types to power each slide’s content. In this case we can’t just simply drop in the 1,2,3s for the tab numbers. Be sure to check out my guide on implementing Liquid Slider with WordPress and custom post types, then continue below.

Once you’re all setup with getting Liquid Slider into your WP theme, you’ll have something like this:

Basically, we’re doing the same type of WP_Query from the tutorial linked above, just adding in the $postnum variable, incrementing it by 1 each time, and then echoing that within our span tag to show our 1,2,3s.