Really need navigation buttons, but how?

I’d also like to be able not to fill in a title and description. Is it possible to change that?

Hi jasjoerii:

Currently, the title and description are required, but I agree that they should be optional. If you’re not using your title and description in any slide, you can delete them from your theme and then just put in random text; it’ll satisfy Total Slider, and they won’t show up in the theme.

I’ve added this feature request to our issue tracker; we’ll add more details there as we develop it.

In terms of navigation buttons:

For future reference, I’ve copied the below into a Navigation Buttons page at the Total Slider Developer Wiki. We’ll keep the most up-to-date instructions there!

First (I 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 our Developer Wiki.

As for next/previous buttons, it’s very easy! In fact, I just built some this week for a Total Slider install (you can see them here).

Here’s the JavaScript:

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

The prev and next properties target specific HTML elements that will be used as the next/prev links. I’m using two a tags with the IDs total-slider-previous and -next, as appropriate.

Here it is in the template’s PHP file:

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

I use <?php if ( $s->is_runtime() ) : ?> to make sure I only show the next/previous buttons on the live website, not the slide editor. This makes sure the slide editor is clean and the buttons don’t cause confusion (they won’t work in the admin area, so no sense in showing them!).

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

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!

This is not working for me. The arrows for previous and next are showing up, but when I click them, nothing happens. How do I proceed?

Hi indira14:

We would need to see your specific website to get a sense of why it’s acting up. Feel free to share it here, and we can take a look.

Mine isnt owrking, you may view it here: https://www.wnydistrict.com/

jdev:

Make sure you create a custom theme first by duplicating the twentytwelve theme into your theme’s directory. Then you’ll need to actually replace the bit of code that instantiates jQuery Cycle. You can see instructions on how to create your own Total Slider JS file here.

It’s worth noting—for future users in particular—that this type of customization is for more advanced users. If you’re looking for an “out of the box” solution, Total Slider may not be it at this time!

So, I’m having a bit of trouble with this one.

I copied the twentytwelve theme and have been modifying it. I’ve followed these directions to try to add navigation buttons, and the links appear, but they don’t do anything.

The relevant PHP and JS can be found in this Pastebin document. I put the if ( $s->is_runtime() ) section within the if ( $s->slides_count() > 0 ) block, because I figured it made little sense to display navigation buttons if there were no slides.

Like I said, the buttons show up but don’t work. Clicking on the links just produces no result.

What am I overlooking?

Thanks.

Can you check your Console.log? Are there any error messages that look related?

Also, do you have this site available on a live domain? That would help me look further at the problem (feel free to email it to me, [email protected], if you want to keep it private).

Do the slides animate otherwise?

Also, when you copied the JavaScript into your new theme, did you remove the minified version? Total Slider will automatically pull that minified JS if it’s available.

Thanks for the quick response, Chris.

The slides do animate otherwise. I also removed the minified version of the JS.

I’ll email you the URL. It’s definitely a work-in-progress right now, so I hope you’ll pardon the rather unpolished state of things.

And I’d be happy to check the console.log… but I don’t know how to do that. If you can point me to a guide, I’ll check it out and respond with the details.

Thanks again!

So this boiled down to a jQuery No Conflict error (that I should have spotted at the start, but oh well).

Instead of

jQuery('.ts-twentytwelve').cycle({
	slides: '.ts-twentytwelve-slide',
	timeout: 5000,
	speed: 1000,
	prev:  $('#total-slider-previous'),
	next:  $('#total-slider-next')
});

the code should be:

jQuery('.ts-twentytwelve').cycle({
	slides:  '.ts-twentytwelve-slide',
	timeout: 5000,
	speed:   1000,
	prev:    jQuery('#total-slider-previous'),
	next:    jQuery('#total-slider-next')
});

Being consistent with the jQuery no-conflict fixes the problem!