Numbered Tabs with Liquid Slider
Another post here regarding Kevin Batdorf’s Liquid Slider, my go to jQuery-driven slider for some time now.
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:
<div class="liquid-slider" id="slider-id">
<section>
<h1><span class="nav-number">1</span>My First Slide Title
<img src="my-image.jpg" alt="an image" />
<p>This is some text here.</p>
</section>
<section>
<h1><span class="nav-number">2</span>Another Slide Title
<img src="my-image.jpg" alt="an image" />
<p>For all the funk you've faked on dunks, the world still loves an Oreo.</p>
</section>
<section>
<h1><span class="nav-number">3</span>The Last Slide Title
<img src="my-image.jpg" alt="an image" />
<p>Lorem ipsum, baby doll.</p>
</section>
</div>
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.
Back in our jQuery, take a look at this setup:
jQuery(document).ready(function($) {
$(function(){
$('#slider-id').liquidSlider({
dynamicArrows: false,
panelTitleSelector: ".nav-number",
});
});
});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:
<div class="liquid-slider" id="slider-id">
<?php $postnum = 0; $my_query = new WP_Query('post_type=slide&posts_per_page=5');
while ($my_query->have_posts()) : $postnum = $postnum + 1; $my_query->the_post(); ?>
<section>
<h1>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.
Enjoy!