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');
});

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');
});

• javascript
• jquery
• flexslider

1 Answer 1

It looks like I've managed to get this to work and thought it might be useful to post my solution here incase anyone should be looking to achieve similar functionality with Flexslider. Here is what I came up with:

$('.true-or-false .btn').click(function () {
setTimeout(
    function()
    {
        $('.flexslider').flexslider('next')
    }
    , 2000);
});

Which when clicking a (custom) button within the Flexslider will move to the next slide but not before a delay, when you can specify.

And just a quick note. The reason I wanted to achieve this effect was because when you click on a button (either true or false) an animation occurred telling the user if they're were correct or not before moving to the next question.

Hope this helps somebody else :)