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?

Thanks,
Pablo

Comments

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.

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?

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. : )
d

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?

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.

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!

StatusFileSize
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.

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

#2068973: Video Tutorial Series Suggestions

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

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.

No problem mates ;)

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

@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!