I've been using Flexslider for a while and love it but I've got a custom function I'm trying to achieve that I'm a bit stuck on.
In each slide I have some text with 2 buttons, essentially true or false. Upon clicking one of the buttons they animated depending on if the user has chosen the right answer. No matter what they choose though, after a short delay of a few seconds I want the slideshow to animate to the next slide.
My flexslider call looks like this:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
slideshow: false,
controlNav: false,
touch: true,
smoothHeight: true
});
});
I've managed to create a bit of javascript so that when a button is clicked it moves to the 2nd slide:
$('.true-or-false .btn').click(function () {
$('.slider').flexslider(0);
});
But it'd be a pain to have to do this for every single button, I tried to find a 'next' function but couldn't get anything to work. In addition to this I tried to add .delay(2000)
but that didn't seem to play well with the above code.
I thought there'd be a delay function for slides in flexslider and I'd only have to find a way to move to the next slide using a custom button. Can anyone shed any light on this?
Thanks for taking the time to read this! Ste
* EDIT *
For some reason when I first tried the code below it didn't work but now adding 'next' does make the slide animate to the next one on clicking the button - now I just need a delay!
$('.true-or-false .btn').click(function () {
$('.slider').flexslider('next');
});