Navigation Buttons

chrisvanpatten edited this page Feb 18, 2013 · 3 revisions

Adding navigation buttons to your Total Slider template are a great way to let your users cycle through your slider more quickly, or move to a specific slide. This tutorial shows you how to add them!

Before you start...

First (we have to say this): make sure you aren't editing the default theme within the plugins directory. Make sure you copy it to your own theme's directory, so you don't lose your customizations when you update Total Slider. You can see instructions on how to do this at the Getting Started page.

JavaScript

First, we'll add the prev and next options to our jQuery Cycle block. These two properties target specific HTML elements that will be used as the next/previous links. I'm using two a tags with the IDs total-slider-previous and -next, as appropriate.

You don't need to use a tags though; any element works fine. You can also use classes instead of IDs; it's up to you!

$('.total-slider').cycle({
	speed:      1000,
	timeout:    11000,
	prev:       $('#total-slider-previous'),
	next:       $('#total-slider-next')
});

PHP

Next, we need to add the buttons to our PHP template. Because the buttons won't actually function in the slide editor (and depending how you style them could end up looking weird in the admin area) you might want them to only show up in the actual site. We use <?php if ( $s->is_runtime() ) : ?> to help accomplish that.

<?php if ( $s->is_runtime() ) : ?>
<a href="javascript:;" id="total-slider-previous">«</a>
<a href="javascript:;" id="total-slider-next">»</a>
<?php endif; ?>

Unless you have a good reason not to, I highly recommend hiding navigation buttons in the slide editor!

That's all

And there you go - that's all there is to it! You can style those buttons however you like. Add classes, wrap them in div elements, make them images, etc. Very easy and quick!

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.