Skip to content


Subversion checkout URL

You can clone with
Download ZIP


Change Flexslider Options After Generation? #334

Snugug opened this Issue · 26 comments

I'm curious if there was a way to change the options you've given a Flexslider after it's been generated, say swapping between horizontal and vertical direction? If not, is there a way to remove flexslider from an object after it's been added?


I doubt this would work for all the settings, but I added these public methods to flexslider as a way to update minItems and maxItems at responsive breakpoints so we would get nice fluid scaling while avoiding partial images between min and max:

slider.setOpts = function(opts) {
  for (var opt in opts) {
    vars[opt] = opts[opt];

slider.getOpts = function() {
  return vars;

Then my code just did this:

$(slider_selector).data('flexslider').setOpts({minItems: newNum, maxItems: newNum});

(getOpts was handy for checking the current value, and might be usable to directly-edit the values?)

I think these functions might be nice additions to Flexslider.

Alternately, you could capture the initial HTML, and have JS remove the slider and re-add/re-init as needed.


Just wanted to say that those methods were pretty much pure genius. Exactly what I was looking for.


Thanks @joshbenner - spot on! Might be something @mbmufffin could consider baking in?


I will try to muster some free time and get this in. I like both ideas; data-attribute use and/or capturing the initial HTML. Users generally have issues when I make expectations, such as assuming their HTML didn't change from the original slider initialization. But, at this point, it appears something needs to get in there.


Thanks for chiming in Mr Tyler - with or without this functionality baked in, Flexslider is still badass.


When someone changes the orientation of the ipad flexslider doesn't update itself like it does on a window resize.

How can I currently change the min/max items without patching/hacking the code?

In #391 (comment) he uses the resize method.

In he destroys the old flex-slider elements and re-creates new ones.

Can someone post some code on how to watch for orientation change and reInit? Sorry, I'm not fully clear on how to do this?


You could use the media queries/breakpoints approach that Matt uses in his tutorial.



Has anyone had any problems with this min/max solution and IE8?

IE8 displays all of the slides for me even when resizing down to mobile size (should start at 7, and go down to 5, then 3, then 2, but it always displays all 7). The carousel also doesn't slide smoothly, but slides sort of jumpy. I'm not getting any errors.

Ideas, thoughts?


I finally figured this out after seeing that the number of items for min/max was not updating in IE8.

"innerWidth" is not supported by IE8 (only IE9+). In the function getGridSize() (from this example:, change this line:

return (window.innerWidth < 600) ? 2 : (window.innerWidth < 900) ? 3 : 4;


return ( (window.innerWidth || document.documentElement.clientWidth) < 600) ? 2 : ( (window.innerWidth || document.documentElement.clientWidth) < 900) ? 3 : 4;

And then the number for min/max will be properly updated.


Great solution!! thanks a lot, just one thing, in my case I had to add "slider." before 3thd line of code, it was not working until I added this, and Voila!

for (var opt in opts) {
    slider.vars[opt] = opts[opt];

This worked like a charm! It should really be added into a new Flexslider version.


thank you!! joshbenner
saved the day!!!
Awesome solution


I'm having trouble getting this to do anything. I've tried zimarai's edit too. I've placed the code in jquery.flexslider.js. I have the proper selector for my slider div ( $('#desktop-slider').data ). Where does 'flexslider' in .data('flexslider') actually come from? Not sure what the issue is.


@joshbenner Where did you include these methods within the Flexslider source? I have a project I'm working on where I need 1 slide to display mobile-first and then once my desktop-size breakpoint is hit, I'd like to display 2 slides at a time. I hate to use Matt Wilcox's solution that @gmclelland suggested, just because destroying and reinitializing the slider will be more taxing on the browser. If there's a way I can use your methods Josh and then update the slider options after initialization, I'm thinking that would be best. Could you provide a little more insight on how/where you implemented these methods? I'm also thinking of using to then control my query breakpoints. Thoughts? Anyone else willing/able to weigh–in?


Is this part of the main source code now?


Really would love this to be part of the main source for responsive design!!!!!


Can anyone tell me if the second option mentioned at the beginning of this thread is possible or point me to how? The second option being the ability to basically only add or remove flexslider at a particular media query (e.g. flexslider gets added for up to a maxwidth of 480px, and after that flexslider isn't activated anymore?


Thanks @andyknapp, since I'm a designer and by no means a js pro, could you give me any more insight into how you used Match Media? Again, thanks for the help!


Thanks @andyknapp. That's what I had tried. My problem really is that I need to be able to UN-initialize/destroy flex slider past that breakpoint, and this doesn't seem to do that for me I guess.


Really would love this to be part of the main source for responsive design!!!!!



@jponch I managed to solve this recently.. There's a pull request for a destroy method, have a look at #771 and try using that?
I've used it to create the flexslider below a breakpoint, and then destroy when it gets wider.


I tried to change animation from fade to slide but it didnt work for me, any idea? I've tried following code without success -
$(myslider).data('flexslider').setOpts({animation: 'swing', easing: 'swing', fade: false });

@jeffikus jeffikus closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.