Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Multiple Flexsliders on one page #533

BenRacicot opened this Issue Jan 31, 2013 · 9 comments


None yet
2 participants

Does anyone know of any decent tutorials on using two Flexsliders on the same page? The example given on it's official page is loading my desired "carousel slider" on top of my main slider even though it's markup is a ways down my page.
Here's what doesn't work ;)
   jQuery(document).ready(function($){ $('#main-slider').flexslider({ animation: "slide", controlsContainer: ".flex-container", slideshow: false, }); $('#reviews-slider').flexslider(); //{ need these to work with the carousel // animation: "slide", // controlsContainer: '.flex-container', // itemWidth: 210, // itemMargin: 1, // minItems: 5, // maxItems: 9, // move: 0, // }); });

two flexsliders
You can see in the image that the second FS is on top of the first FS and appearing, not layed out in, the main-flexslider's div.

Maybe check the demo for Woo's Function theme:

One thing I think your second slider needs is:

asNavFor: '#main-slider',

though I can't guarantee if that will get your sliders in the right place.

@helgatheviking Thanks for the reply, I'm dead in the water.
That theme's secondary slider is a control for the main slider.

Not trying to make a controls container for the main-slider, just even more simply trying to add a second independent slider for thumbs somewhere else on my page.

I made Fiddle of what I'm doing if that helps?

@BenRacicot BenRacicot closed this Feb 5, 2013

You don't have to download Function.. all the JS is in the source. However, I think i am realizing that your second slider isn't meant to be the pagination for the first slider as Function is doing. In which case I think the trouble is that you have .flex-container as the controls div, and it doesn't exist.

Put some images in your fiddle, I will take a look.

I closed it by accident... sorry.

@BenRacicot BenRacicot reopened this Feb 5, 2013

Ok I created a .flex-container div for each. And the same type of problem persists. The divs are using each others divs...


The .reviews-slider, while looking good in source, is taking up the entire page upwards to where .main-slider begins.
However Absolute positioning .flexslider moves the secondary slider to the top left of the page covering the main-slider.

It's beyond me why the secondary slider is forced "within" but not layed out any where near the main slider.

You can't use document ready. The documentation clearly says you must use on load. Working multiple sliders:

And using 1 slider as nav for the other, per the demo
the fiddle:

Great catch, thank you. But it's not the problem. I now see that Flexslider itself isn't the problem but I cannot fix or understand what is forcing my #reviews-slider to the top of my page.
Thanks for your help. Learned a lot.

You should close this then, as it seems like it is not a FlexSlider issue. Check for broken markup....

@BenRacicot BenRacicot closed this Feb 5, 2013

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment