I'm trying to get a FlexSlider implementation similar to this example - http://flexslider.woothemes.com/thumbnail-slider.html.

Testing using a clean installation of Drupal 7.15. Theme is Bartik and the following modules are enabled:

CTools 7.x-1.2
Features 7.x-1.0
FlexSlider 7.x-2.x-dev
FlexSlider Example 7.x-2.x-dev
FlexSlider Fields 7.x-2.x-dev
FlexSlider Views Slideshow 7.x-2.x-dev
FlexSlider Views Style 7.x-2.x-dev
Libraries 7.x-2.0
Views 7.x-3.5
Views Slideshow 7.x-3.0

Flexshow v2 library is installed under /sites/all/libraries/flexslider

I've looked through the documentation and have also looked at the examples provided by the FlexSlider Example module (thanks for including this - awesome), using the sample 'Slider w/thumbnail slider' option set as it appears to provide what I'm looking for.

However when I do this I only see the main slider. No thumbnails at all.

Any idea if I've done something wrong or if this is a bug?



minorOffense’s picture

Status:Active» Closed (fixed)

That one's a tricky one to setup. You actually need to define two individual sliders on the same page. Then in the option sets, give the slider ids to each set so the two sliders can communicate with one another. (Look at the "asNavFor" and "sync" values in the javascript on the FlexSlider 2 demo page you linked to above).

It's not the best solution and I've been trying to think of a way to make it simpler, but for now you'll have to setup both sliders and option sets manually and place them on the same page.

I've got ideas for some kind of "wizard" or extra config page that configures this all automagically but I haven't thought it through and no code exists for that yet.

There should be an example of this in the FlexSlider Example module. A pair of Views linked together displayed on the same page using a pair of option sets to get everything working.

Hope that helps.

jpstrikesback’s picture

Status:Closed (fixed)» Active

The Thumbnail controlNav pattern seems like it would be easier to implement in the views slideshow theme stuff: http://flexslider.woothemes.com/thumbnail-controlnav.html

Am I right?

Diane Bryan’s picture

That is a tutorial much missing in Drupal.org.. Best practices for connecting the thumbnail carousel (created via views) with the Image slider (created by another view). minorOffense, if you were ever willing to give *yet again* back to the community, the community would breathe a breath of gratitude in your direction and subject you to melifluous praise. : )

Goekmen’s picture

I have setup two views. I wanted to use the second view (carousel items) to control/sync the first one.
The optionssets are set but I am not sure what values to enter (namespace, sync and so one).
I tried all possible combinations but still can´t get it to work :-(

Can someone please tell me what values to use?

skchan2’s picture

im interested in syncing two flexsliders as well

i have two separate displays in the same view, but i don't know what to put in for sync, namespace etc.

joshua.howell’s picture

I'm using Field Formatters in Display Suite rather than Views but I had similar issues trying to get the two sliders to sync. What worked for me was entering "#flexslider-" in the "Sync / Use as navigation" options (don't worry about "namespace").

Here is an example;

Let's say you have a "Thumbnail Carousel" flexslider and a "Main Slide" flexslider.
The "Thumbnail Carousel" flexslider should have "Use as navigation" set to "Main Slide".
The "Main Slide" flexslider should have "Sync" set to "Thumbnail Carousel".

The problem I had was that the slider names were being changed by the code so "Thumbnail Carousel" and "Main Slide" were being changed to "flexslider-1" and "flexslider-2".

If you're having issues check your HTML and jQuery.extend() script. Hope this helps someone else!

Geijutsuka’s picture

new5.41 KB
new112.44 KB
new93.23 KB

I don't know if I'm misreading how to do this, or if there's some type of bug in the module (I assume it's the former).

Situation: each node has multiple images uploaded and for their display, I'd like to display a main image slideshow with carousel navigation underneath.

As noted by dougthelegoman in #1975310-7: Syncing Multiple Flexsliders, work is still being done to make the thumbnail navigation setting for the field formatter look "pretty" (I assume he means function as a slider/carousel). I've attached a screenshot of what the setting looks like when a bit of css is applied for spacing; it looks just fine when there's not a lot of thumbnails, but does not output a navigation carousel as shown on http://flexslider.woothemes.com/thumbnail-controlnav.html.

I've tried making a view (a block view with ajax enabled) with an attachment which appears on the nodes with images (content node id argument from URL). Either I don't have the settings right, or the views can't sync when it's in block and attachment form... I have attached another screenshot of the view's output with the two corresponding flexslider settings. In fact, in this state, any navigation for the slideshow is completely unresponsive.

I have no idea what I'm doing wrong and I can't get the views to sync to save my soul.
(exported view is also attached)

I do not know of any other slider that's as responsive and touch-enabled as flexslider... It's the best IMHO... if only I can get things working correctly.

minorOffense’s picture

I've added this issue to the video series list.

#2068973: Video Tutorial Series Suggestions

tche082’s picture

i have the exact same problem with #7. i can't get the carousel to show up as a slider too.

tche082’s picture

I seems to have make some progress on making a carousel that controls the slider.

I have attached two export files for the flexslider profiles, one is for the carousel and one is for the slider.

In the views, i have made two separate content pane. Make sure you have placed two distinct ID for the carousel and slider in the flex settings. (see attached screenshot). And these two ID should be used in the flexslider profile for the "sync" and "use as navigation" fields.

i still have problem with the auto scrolling but at least the carousel can control the slider for now.

klonos’s picture

No problem mates ;)

...taking the chance to shamelessly promote #1956166: Auto-generate interdiffs between patch files (from patches uploaded previously).

hockey2112’s picture

@tche082, can you please post an export of your View? I have been trying the method you posted above, but cannot get it to work as expected. My main issue is that the thumbnails do nothing when clicked, and all thumbnails are being displayed (they are not hiding/displaying using the carousel controls). Thanks!

maxplus’s picture


I also had problems to make this work.
Now I found out that the Advanced options in the Flexslider optionset for the SYNC and USE AS NAVIGATION point to the div of the flexslider.
So i have solved my problem by using Firebug and look for the DIV name of the main slider.
=> I entered that div (in my case #flexslider-1) in both the fields "Sync" and "Use as navigation" in the optionset of my controlling carousel.

So my setup is the following:
1. I render an multiple image field in my node using the flexslider field formatter with the optionset "Slider"
2. I have created a view in the format "unordered list" with one field: the same image field used in my node
3. I have set the field formatter for that image field in my view with flexslider using the optionset "Carousel"
4. I fetch the current nid as contextual filter in that carousel view
4. In my case, I'm using panels and I put the carousel right beneath the image field

=> everything working fine:
- you can both use left/right arrows for the main image and the carousel
- when clicking on an image in the carousel, it appears as main image in the main slider

rodpal’s picture

To have this working you need to update jquery. I'm currently running jquery 1.8.

ryivhnn’s picture

Beating a dead topic!

I have a page view with two attachment views, the sliders are in one attachment view each. The sliders are fine in their attachment previews but on the page preview and the page itself, the main view will not display. Doesn't matter what order things are rendered in. The images are in code, just stuck in display: none. Only way to get main to show is to disable nav (um?!), so currently a bit of a challenge to get the sliders on the same page! :)

I tried replicating the attachments as blocks and threw the lot into a tpl to have a play around and same story there, didn't matter what order the sliders were in, if there was a nav slider, the main slider simply wouldn't display. I also attempted doing what the authors of #7 and #13 were describing with a content type with multiple image field, same story, if nav is present, it doesn't display.

At this stage not sure if there is something wrong with my sliders (hope not, I eventually copied the ones in flexslider_example after mine staunchly refused to cooperate) or my setup (possibly though I don't think the setup is that complicated).

My ajax is non-existant, if anyone has pointers on where to start looking they'll be very much appreciated :)

hockey2112’s picture


Any chance you could provide us with an export of your view, and perhaps a features export of your content type that has the working carousel? I followed your instructions, but cannot get it to work.

tfranz’s picture

#14 did it for me!
I'm using https://drupal.org/project/jquery_update to update jQuery to 1.8.

rodpal: Thank you!!

jcam88’s picture

A quick alternative is to use the views pager feature. Simply display 5 or so images, (optional) enable ajax for a smooth transition between pages. You can easily theme the pager buttons and thumbnails to your liking. This method may help with performance as you are now loading a controlled set of images at a time.

beckyjohnson’s picture

I am getting no where with this. If I use the display formatters like #6 it won't work at all. So oddly if I set both image fields to "basic carousel" under the formatting options, both basic carousels show up. But if I make one "basic" and set the other one to "Thumbnail slider" then I get a blank page. Here is the example page:

There are two image fields on this page. The top one is set to basic carousel and "flexslider full image" and the one under it is supposed to be the thumbnail nav and i have it's option set to "thumbnail slider". Guys, I'm using jquery update 8.1 and I have tried 9 and 10. Nothing works. At this point I don't even have them synced up! What should I do?


beckyjohnson’s picture

Actually I have a HUGE problem The module isn't the problem. I have an old mac, running snow lepoard and safari 5.1.10.....and it doesn't work on that browser. Yet, the official flexslider website works great. How can I trouble shoot this? Here is the link below again?


Edit: I found the problem. The class "flex-viewport" has a height of zero in safari and it's inline css. Where is this coming from and how can I over ride it?


socialform’s picture

I know I've posted this in other issues, sorry.. but these all seem to be missing a helpful tutorial...

I was having similar issues and then this tutorial helped me out. Maybe it will for others:

In my case I wasn't putting the # character before the ID in "Sync" and "Use as navigation". You get the ID for the respective Thumbs and Gallery flexslider from their views settings. I also wasn't clear on whether to put the ID in Sync or Use as navigation. It turns out to be obvious... you put the Thumbnail view's ID in the Gallery's flexlider Sync option. AND you put the Gallery's View's ID in the Thumbnail's flexslider Use as navigation option. The tutorial above left this last part out.