CODEWITHSUNDEEP
flexslider
Olly
Olly

Reputation: 21

resetting flexslider on element click

I am currently building a site which utilises multiple flexsliders. The concept is that when the user clicks a specific button, it shows a flexslider with featured content relevant to the button pressed, which is all pretty simple stuff.

The problem i am having is at the moment, the flexsliders are firing on the click of a button, however whenever a user clicks on a different button, the slider is not reset.

I want to try and make the slider reset to slide 0 on each button click. I have tried using .stop() and some of the callback features within the plugin, but i have had no luck as of yet. Was wondering if anybody else had ever faced this before? (and won..)

the code in the footer.php is pretty standard issue at the moment:

    $('.button').click(function() {
    $('.flexslider').flexslider({ 
        controlNav: true,
        directionNav: false,
        slideToStart: 0,  
        pauseOnHover: true,  
    });
});

Upvotes: 2

Views: 5015

Answers (3)

vladnega
vladnega

Reputation: 79

I know it's been long since this question was posted, but it might help somebody.

I actually faced the same problem. After some poking around I managed to get it working using the following code:

// Catch the flexslider context
var slider = $(".flexslider").data("flexslider");

// Unset the animating flag so we can move back to the first slide quickly      
slider.animating = false;

// Move to the first slide and stop the slideshow there
slider.flexAnimate(0, true, true);

If you want to return at the first slide, but don't want the animation to stop, just replace the last line with slider.flexAnimate(0);

I believe that the slider.stop() method doesn't unset the animating flag. In my opinion it should, because this flag is used in the flexAnimate() function to check whether to actually slide or not. If the flag is set to false, then the flexAnimate() function will suddenly return.

Upvotes: 3

lara
lara

Reputation: 1

use the new api at line 1056 in flexslider like ' startAt: 0,
//Integer: The slide that the slider should start on. Array notation (0 = first slide)'

Upvotes: 0

FourStacks
FourStacks

Reputation: 586

think the answer might lie in the start callback function. Try something like this (untested)

$('.button').click(function() {
   $('.flexslider').flexslider({ 
        controlNav: true,
        directionNav: false,
        slideToStart: 0,  
        pauseOnHover: true,
        start: function(slider) {
            if (slider.currentSlide != 0) {
                slider.flexAnimate(0)//move the slider to the first slide (Unless the slider is also already on the first slide);
            }
        }
   });
});

Upvotes: 0

Related Questions