Reinitialise existing jQuery flexslider with new o

Question

I used $(document).ready to load script:

$(document).ready(function (){
    $('.flexslider').flexslider({
       animation: 'fade',
       controlsContainer: '.flexslider'
    });
});

Next I want to change option "animation" by buttons:

<div class="container span12 menu">
    <a id="link-fade" class="menubtn" href="#">FADE</a>
    <a id="link-slide" class="menubtn" href="#">SLIDE</a>
</div>

but this not working:

$(document).ready(function (){
    $('#link-fade').click(function(){
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
        return false;
    });
    $('#link-slide').click(function(){
        $('.flexslider').flexslider({
            animation: 'slide',
            controlsContainer: '.flexslider'
        });
        return false;
    });
});

Answer 1

In my opinion the only way to do it is remove whole element, create new one and call flexslider function with new one. "animation" parameter is used only during initialization of widget.

Answer 2

Whilst this is untested, I did find this small piece of code within the Docs:

  $(window).load(function() {

      // store the slider in a local variable
      var flexslider;

      /** 
       *  Animation with Fade for
       *  default
      **/
      $('.flexslider').flexslider({
          animation: "fade"
      });

      /**
       *  On click, directly change
       *  the public .vars within flexslider.
      **/
      $(document).on('click', function(){
          flexslider.vars.animation = "slide";
      });

   });

Note, this would only work with Flexslider 2.2.0:

"Made all slider variables public, stored in slider.vars"

Source: FlexSlider Docs https://github.com/woothemes/FlexSlider

As for your code, the second click wouldn't work as Jakub Michálek mentioned within the comments, it's already initialised - you'd have to re-adjust it via the properties that commonly, most plugins/programmers carter for, as long as their variables are publicly adjustable somehow =)

Answer 3

This might be an oldish question, but I figured, since it was one of the first results I got on Google for the problem, I'd share my solution.

@MackieeE's answer got me about halfway (thanks!), but I couldn't find the missing pieces in any one place. What I found solved the problem was to (1) use Flexslider's start property to assign a reasonable value - namely the slider object from flexslider - to the flexslider variable, (2) make that variable global by attaching it to javascript's window object, so that it's reachable from outside the scope of the start callback, and then (3) change the vars property of the slider object to modify the flexslider options. After that, you can change pretty much any property attached to your slider pretty much when- and wherever you like.

Complete (example) code below:

// Initialize Flexslider with some options, and
// give a reasonable definition for the variable
$('.flexslider').flexslider({
    maxItems: 4,
    slideshow: true,
    animation: "slide",
    start: function(slider){
        window.flexslider = slider;
    },
});

// Modify option(s) in a click event
$('#some-element').click(function(){
    if(typeof window.flexslider !== 'undefined') {
        window.flexslider.vars.maxItems = 5;
        window.flexslider.vars.animation = "fade";
        window.flexslider.vars.slideshow = false;
    }
});

Hope this helps anyone else looking for an answer to this or a similar question. :)

Answer 4

Declare your slider and catch object with data... Like this :

$('.selector').flexslider({
    animation: 'slide',
    ...
});
var flexslider = $('.selector').data('flexslider');

Now you can manipulate the stuff after declaration :

$(window).resize(function() {
    flexslider.vars.animation = 'fade';
)};