Slider with thumbnail slider example

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.

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!

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!

Hi,

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

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

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

maxplus,

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.

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

rodpal: Thank you!!

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.

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:
http://dmta.right-brain.net/commercial/example-location#

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?

Rebecca

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?

http://dmta.right-brain.net/commercial/example-location

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?

Rebecca

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:
http://www.reinisfischer.com/drupal-developer/drupal-flex-slider-gallery...

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.

I haven't read all of the thread, so apologies if this has already been covered.

First you'll need two presets and a view like these. In this example it's for images attached to a taxonomy term, but you get this idea.

$preset = new stdClass();
$preset->disabled = FALSE; /* Edit this to true to make a default preset disabled initially */
$preset->api_version = 1;
$preset->name = 'thumbnail_carousel';
$preset->title = 'thumbnail-carousel';
$preset->theme = 'classic';
$preset->options = array(
  'namespace' => 'flex-',
  'selector' => '.slides > li',
  'easing' => 'swing',
  'direction' => 'horizontal',
  'reverse' => 0,
  'smoothHeight' => 0,
  'startAt' => '0',
  'animationSpeed' => '600',
  'initDelay' => '0',
  'useCSS' => 0,
  'touch' => 1,
  'video' => 0,
  'keyboard' => 0,
  'multipleKeyboard' => 0,
  'mousewheel' => 0,
  'controlsContainer' => '',
  'sync' => '',
  'asNavFor' => '#flexslider-taxonomy-main',
  'itemWidth' => '120',
  'itemMargin' => '5',
  'minItems' => '0',
  'maxItems' => '0',
  'move' => '0',
  'animation' => 'slide',
  'slideshow' => 0,
  'slideshowSpeed' => '7000',
  'directionNav' => 1,
  'controlNav' => '0',
  'prevText' => 'Previous',
  'nextText' => 'Next',
  'pausePlay' => 0,
  'pauseText' => 'Pause',
  'playText' => 'Play',
  'randomize' => 0,
  'thumbCaptions' => 0,
  'thumbCaptionsBoth' => 0,
  'animationLoop' => 0,
  'pauseOnAction' => 1,
  'pauseOnHover' => 0,
  'manualControls' => '',
);

And

$preset = new stdClass();
$preset->disabled = FALSE; /* Edit this to true to make a default preset disabled initially */
$preset->api_version = 1;
$preset->name = 'thumbnail_main';
$preset->title = 'thumbnail main';
$preset->theme = 'classic';
$preset->options = array(
  'namespace' => 'flex-',
  'selector' => '.slides > li',
  'easing' => 'swing',
  'direction' => 'horizontal',
  'reverse' => 0,
  'smoothHeight' => 0,
  'startAt' => '0',
  'animationSpeed' => '600',
  'initDelay' => '0',
  'useCSS' => 1,
  'touch' => 1,
  'video' => 0,
  'keyboard' => 1,
  'multipleKeyboard' => 0,
  'mousewheel' => 0,
  'controlsContainer' => '.flex-control-nav-container',
  'sync' => '#flexslider-taxonomy-thumbnails',
  'asNavFor' => '',
  'itemWidth' => '',
  'itemMargin' => '10',
  'minItems' => '4',
  'maxItems' => '0',
  'move' => '0',
  'animation' => 'slide',
  'slideshow' => 1,
  'slideshowSpeed' => '7000',
  'directionNav' => 1,
  'controlNav' => '0',
  'prevText' => '',
  'nextText' => '',
  'pausePlay' => 0,
  'pauseText' => 'Pause',
  'playText' => 'Play',
  'randomize' => 0,
  'thumbCaptions' => 0,
  'thumbCaptionsBoth' => 0,
  'animationLoop' => 1,
  'pauseOnAction' => 1,
  'pauseOnHover' => 0,
  'manualControls' => '',
);

$view = new view();
$view->name = 'flexslider_taxonomy';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'taxonomy_term_data';
$view->human_name = 'Flexslider Taxonomy';
$view->core = 7;
$view->api_version = '3.0';
$view->disabled = FALSE; /* Edit this to true to make a default view disabled initially */

/* Display: Master */
$handler = $view->new_display('default', 'Master', 'default');
$handler->display->display_options['use_more_always'] = FALSE;
$handler->display->display_options['access']['type'] = 'perm';
$handler->display->display_options['cache']['type'] = 'none';
$handler->display->display_options['query']['type'] = 'views_query';
$handler->display->display_options['exposed_form']['type'] = 'basic';
$handler->display->display_options['pager']['type'] = 'full';
$handler->display->display_options['style_plugin'] = 'flexslider';
$handler->display->display_options['style_options']['optionset'] = 'thumbnail_main';
$handler->display->display_options['style_options']['id'] = 'flexslider-taxonomy-main';
$handler->display->display_options['row_plugin'] = 'fields';
/* Field: Field: Slideshow Images */
$handler->display->display_options['fields']['field_slideshow_images']['id'] = 'field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['table'] = 'field_data_field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['field'] = 'field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['label'] = '';
$handler->display->display_options['fields']['field_slideshow_images']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_slideshow_images']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_slideshow_images']['settings'] = array(
  'image_style' => 'home_banner',
  'image_link' => '',
);
$handler->display->display_options['fields']['field_slideshow_images']['group_rows'] = FALSE;
$handler->display->display_options['fields']['field_slideshow_images']['delta_offset'] = '0';
/* Contextual filter: Taxonomy term: Term ID */
$handler->display->display_options['arguments']['tid']['id'] = 'tid';
$handler->display->display_options['arguments']['tid']['table'] = 'taxonomy_term_data';
$handler->display->display_options['arguments']['tid']['field'] = 'tid';
$handler->display->display_options['arguments']['tid']['default_action'] = 'empty';
$handler->display->display_options['arguments']['tid']['default_argument_type'] = 'fixed';
$handler->display->display_options['arguments']['tid']['summary']['number_of_records'] = '0';
$handler->display->display_options['arguments']['tid']['summary']['format'] = 'default_summary';
$handler->display->display_options['arguments']['tid']['summary_options']['items_per_page'] = '25';

/* Display: Attachment */
$handler = $view->new_display('attachment', 'Attachment', 'attachment_1');
$handler->display->display_options['pager']['type'] = 'none';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['defaults']['style_plugin'] = FALSE;
$handler->display->display_options['style_plugin'] = 'flexslider';
$handler->display->display_options['style_options']['optionset'] = 'thumbnail_carousel';
$handler->display->display_options['style_options']['id'] = 'flexslider-taxonomy-thumbnails';
$handler->display->display_options['defaults']['style_options'] = FALSE;
$handler->display->display_options['defaults']['row_plugin'] = FALSE;
$handler->display->display_options['row_plugin'] = 'fields';
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['defaults']['fields'] = FALSE;
/* Field: Field: Slideshow Images */
$handler->display->display_options['fields']['field_slideshow_images']['id'] = 'field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['table'] = 'field_data_field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['field'] = 'field_slideshow_images';
$handler->display->display_options['fields']['field_slideshow_images']['label'] = '';
$handler->display->display_options['fields']['field_slideshow_images']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_slideshow_images']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_slideshow_images']['settings'] = array(
  'image_style' => 'flexslider_thumbnail',
  'image_link' => '',
);
$handler->display->display_options['fields']['field_slideshow_images']['group_rows'] = FALSE;
$handler->display->display_options['fields']['field_slideshow_images']['delta_offset'] = '0';
$handler->display->display_options['displays'] = array(
  'default' => 'default',
  'page_1' => 0,
);
$handler->display->display_options['attachment_position'] = 'after';

Success with http://www.reinisfischer.com/drupal-developer/drupal-flex-slider-gallery... and #14.

But I still have one problem remaining for which I have not found a solution to yet... I only want a single row thumbnail navigation carousel. However all the thumbnails are visible at once. Could someone please advise how to do this.

Hi,

I followed my previous post and did not get it to work again...very strange.
After trial and error I found out that this is my final setup to get it work:

1. Create a flexslider preset "main image slider" for your main slider
=> Because I want one big image to slide with, I use these settings:

General:

• Animation: fade (because I like this effect)
• Item Width: 0
• Item Margin: 0
• Minimum Items: 0
• Maximum Items: 0

Navigation:

• Next/Previous Controls: yes
• Paging Controls: on

Advanced:

• Sync: #flexslider-2

2. Create a flexslider preset "thumbs" for your thumb slider
=> Because I want to see multiple images at once, I use these settings:

General:

• Animation: slide (very important, If you select "fade" here, it will not work!)
• Item Width: 70
• Item Margin: 0 (because I have a thumb image style where there is already white space around the image)
• Minimum Items: 3 (very important)
• Maximum Items: 10 (equal or higher then min.items)

Navigation:

• Next/Previous Controls: no (I don't like it and else I can't click on the first image because the nav arrow is on top)
• Paging Controls: off

Advanced:

• Use as navigation: #flexslider-1

3. Set the node display settings of your image field to "flexslider" and select the option set "main image slider" (you need to enable the flexslider fields module first if not done yet)
=> You also need to choose your image style here (not in the option set)

4. Create a block view "thumbs" and set the view style to flexslider and select the option set "thumbs"
=> Add your image field and set the display formatter to image and select your image style
=> important: disable the option to display all images in the same row!
=> Disable the view pager and display all images
=> Add a contextual filter to the nid and set a default value "get nid from URL"

When you display the block view "thumbs" on the same page as the main slider, it will work

@maxplus thanks heaps for your step by step instructions.

Hoping you can add just one more thing. How do we limit the number of visible thumbnails in the navigation slider to a single row of say 4 thumbs? And.. which will also continue sliding through the remaining images on command.

Hi everyone,

I created a patch that adds some configuration options to streamline the process of creating a carousel pager. It would be great to get some testers on it!

#2487672: Simpler Carousel Pager Navigation

Thanks!
drclaw

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

Shameless plug, but I created a tutorial that outlines the exact steps to create the above example in Drupal.
http://stevepolitodesign.com/blog/drupal-flexslider-carousel-controls

I needed something a bit different than a row of custom img thumbs in my flexslider. I needed some text that I could style and use as thumbs. Ended up with a simple solution that I think will work for nearly any thumbnail content.

Set up the slideshow fields (in a paragraphs widget in my case):
1. Image field (allow unlimited)
2. Thumbnail field (text in my case, but can probably be anything) (allow unlimited)

Flexslider Settings (first part):
1. Create a new flexslider optionset configuration (so as not to mess with any other sliders).
2. Flexslider Navigation controls: Set Paging Controls to "thumbnails".

View:
1. Add your image field (make sure uncheck "display all in same row" under the multi-field settings.
2. Add your thumbnail field and exclude from view. In the multi-field settings for this field, check display in unordered list.
3. Add a Footer global text area and check "Use replacement tokens from row". Add the token for your thumbnail field.
4. Set your view format to Flexslider and select the flexslider optionset you created above.

Flexslider setting (second part)
1. Go back to your flexslider optionset config, go to Advanced Options add the css selector for your thumbnail view-field way down at the bottom under "Manual Controls (Advanced).

That should be it, you now have completely custom thumbnails.

!!!! IMPORTANT NOTE !!!!!
When adding content to the slideshow, make sure that the number of slide images and the number of thumbnails are exactly the same.

I had a problem where the carousel thumbnails were not clickable (to display large image in the main slider).
Problem was caused by my FS views displayed in Panels.
Solution was to enter identical Element ID´s in the Panel content CSS properties - so the ID´s (#) for slider and carousel are now entered in three places - (2x) views, (2x) flexslider option sets and (2x) panels.

Hi, you all may want to check out this Youtube tutorial by Drupal Legoland called, Drupal FlexSlider - 4 - Slider with Carousel Slider as Navigation (Slider w/thumbnail slider), https://www.youtube.com/watch?v=pAFv1iYOXDo. It describes in detail how to set up the 2 Views, on with an id #slider and the #carousel and how to sync slider to carousel and use carousel as the navigation.

My problem is that I just want to just use the carousel part because it's already styled but I need it to be responsive. I'm investigating if can cherry pick the partially obscured display in the tablet size and still keep my CSS styles. If anyone can give me a hand I would appreciate it.