Mulitiple items in flexslider li from view

v2 has support for showing multiple items per slide in the library. So this will be possible without having to make any template modifications.

For v1, this is probably the best solution.

You mention that v2 has support for showing multiple items per slide in the library -- can you explain how I can show multiple items per slide? Which module do I use -- the standalone flex slider views plugin or the views_slideshow sub plugin ?

Assume that this is just merely in the library and no view support exists.

Perhaps the use of grouping in views could get some folks there, however I need to do it simply by number cluster...
Show 5 items, click/touching next will shift it over by one (or more).

Is anybody find the way to make it with V2 ?

Pls.

Flexslider v2 beta let us to create carrousel but we have to wait for the intergration in views.. i guess :(
http://flex.madebymufffin.com/examples/basic-carousel.html

The carousel should be working. Check the flexslider_example module found within it. There should be an example carousel in there.

If not, let me know and I'll create an example for it and add it to the module.

Thanks!

Can you please show us an example of how to select number of item per slide in views creation please ?
Thanks

Turns out this is readily available in http://drupal.org/project/views_slideshow

I can confirm this works with FlexSlider. You can wrap whatever you want in the li and it will appear in the slideshow. You can use the carousel mode to show multiple items at once.

I'll make a note to add more documentation and display text to explain how to do this.

Thanks.

I wish to implement this on my site as well, any progress on the documentation? Thanks

I took the same approach as the original poster, but instead overrode flexslider-views-slideshow-main-frame-row.tpl.php

Here's my code if anyone else needs to do the same:

<?php
/**
 * @file
 * Template for the Flex Slider row
 *
 * @author Mathew Winstone (minorOffense) <mwinstone@coldfrontlabs.ca>
 *
 * Available variables:
 *   $items: The complete set of items being rendered.
 *   $count: The count of the item currently being rendered.
 *   $view: The views object.
 *   $classes: Classes to be added to the containing element.
 */
?>
<?php if ($view->name == 'videos' && is_integer($count/3)) { ?>
  <li class="<?php print $classes; ?>">
<?php } ?>
    <?php print $rendered_items; ?>
<?php if ($view->name == 'videos' && is_integer($count/3)) { ?>
  </li>
<?php } ?>

Using your code 2 images are displayed. One is sliding but the other stays and doesn´t change.
How can i change it to slide 2 ore more images?
Thanks in advance!

The carousel docs for Flexslider are here

http://flexslider.woothemes.com/carousel-min-max.html

You just need to set those values in your option set to have it display. I'm working on a client site which will need flexslider and some display text so I'll (finally) get to write up some docs on how to get non-image slides to work.

typo

It's worth noting that in order to show multiple images in flexslider via views one has to specify item width in flexslider options, otherwise it will only scroll one item... at least that was my case

Thank you for the response.

But I want to show the 12 images in 3*4 table by using flex slider. How can I get it. Actually I want to show 12 images in thumbnail with slider so that next 12 images shown on NEXT click. Can it be done by flex slider.

yes it can be done. Try setting Item width (ex. 80) Minimum Items (12) and Move (12) under /admin/config/media/flexslider/list/*/edit

Thank you zeglar.com, But this shows all 12 items in a single rows while I want these 12 items in 3 rows & 4 columns (as 12 images shown in grid).

Simplest way to accomplish this is to just create 3 flex sliders and sync them together

Appreciating your answer but please can you tell me how can I achieve this functionality. I have 12 different node's images.

I am sending you the snapshot of my problem so that you can understand what actually I want to say.

This is actually I want to do.

Oh. Add 3 image fields in views. you'll have to do some css magic but that should solve your problem

Mentioning the width settings in #15 was a good point. I already started hacking around in the CSS to get it working … Is there a possibility to integrate the slideshow with fixed height instead (and proportional width = auto)? I need the slideshow to handle mixed portrait and landscape images at a time. Now the landscape pictures are scaled to the width, but should have the same height as the portraits.

Thanks for your help.

I could adjust the images to the same height with CSS, but the pre-calculated width of the container and the anchor points for the sliding transitions are messed up now. Any advice?

hey toni,

do you have a live example? I could take a look at your css and see if I can find a trick ... you can private contact me too

Just extending the solution in #11. Note that the file flexslider-views-slideshow-main-frame-row.tpl.php comes from the "flexslider_views_slideshow" module, which is now a separate module.

<?php if ($view->name == 'my_view'): ?>
  <?php /* is first? begin with <li> */ ?>
  <?php if ($count == 0): ?>
    <li>
  <?php endif; ?>
  <?php if ($count <> 0 && is_integer($count / 4)): ?>
    </li>
    <li>
  <?php endif; ?>
    <?php print $rendered_items; ?>
  <?php /* is last? finish with </li> */ ?>
  <?php if ($count == count($view->result) - 1): ?>
    </li>
  <?php endif; ?>
<?php else: ?>
  <li class="<?php print $classes; ?>">
    <?php print $rendered_items; ?>
  </li>
<?php endif; ?>

This just isn't working for me. I set the options as seen in the attached screenshot. What am I doing wrong?!? The way it's set up I'd expect it to behave like the example on the flexslider page in #13 but it's just not. I'm using the latest dev. Please help if you can? Sorry to change the status if it's working as it should and it's just me...totally possible. The view is set up to show all items, this seems to say it will grab between 2 and 6 items and scroll by the currently visible number of items. Seems that the item width should be 300 and margin of 10, but I get a single image, whose imagecrop is 300x300, which is stretched to 100% width (the 300 isn't being applied) and the controls only go through 5 of the items (even though the markup is there for all 9 items in the view before looping back to the first, so I'm not even getting it to cycle through all the items in the markup!?

I had some troubles, but at the end was the items width. Now it's working as it should.

Playing with the Item Width setting fixed it for me in the end. I had to enter a px setting (i.e. "200px", not just "200")

I've tried every combination I can think of and still can't get it to work. px, no px, min and max # of items with different values, tried some css to fix it, nothing doing. can someone post an example of this working and the config screen to show an example of this functioning properly? Using the latest alpha3, flexslider 2.4 and libraries 2.2.

scotself: If you're using views make sure under image field configuration 'Display all values in the same row' in unchecked under 'Multiple field settings'

Except this isn't a multi-value field. It's a single value image field from a content type. Just showing all the logos, need that slideshow responsive and multiples per slide. Each logo just links off to the organization's full page.

Here's the exported view if that helps at all:

$view = new view();
$view->name = 'coalition';
$view->description = '';
$view->tag = 'default';
$view->base_table = 'node';
$view->human_name = 'Coalition Members Page and Flexslider';
$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['title'] = 'Coalition Members';
$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'] = 'none';
$handler->display->display_options['pager']['options']['offset'] = '0';
$handler->display->display_options['style_plugin'] = 'default';
$handler->display->display_options['style_options']['row_class'] = 'col-sm-6 col-md-4 member [field_accepting_applications]';
$handler->display->display_options['row_plugin'] = 'fields';
/* Field: Content: Path */
$handler->display->display_options['fields']['path']['id'] = 'path';
$handler->display->display_options['fields']['path']['table'] = 'node';
$handler->display->display_options['fields']['path']['field'] = 'path';
$handler->display->display_options['fields']['path']['label'] = '';
$handler->display->display_options['fields']['path']['exclude'] = TRUE;
$handler->display->display_options['fields']['path']['element_label_colon'] = FALSE;
/* Field: Content: Logo */
$handler->display->display_options['fields']['field_member_logo']['id'] = 'field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['table'] = 'field_data_field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['field'] = 'field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['label'] = '';
$handler->display->display_options['fields']['field_member_logo']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_member_logo']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_member_logo']['settings'] = array(
  'image_style' => 'medium',
  'image_link' => 'content',
);
/* Field: Content: Title */
$handler->display->display_options['fields']['title']['id'] = 'title';
$handler->display->display_options['fields']['title']['table'] = 'node';
$handler->display->display_options['fields']['title']['field'] = 'title';
$handler->display->display_options['fields']['title']['label'] = '';
$handler->display->display_options['fields']['title']['alter']['word_boundary'] = FALSE;
$handler->display->display_options['fields']['title']['alter']['ellipsis'] = FALSE;
/* Field: Content: Body */
$handler->display->display_options['fields']['body']['id'] = 'body';
$handler->display->display_options['fields']['body']['table'] = 'field_data_body';
$handler->display->display_options['fields']['body']['field'] = 'body';
$handler->display->display_options['fields']['body']['label'] = '';
$handler->display->display_options['fields']['body']['alter']['max_length'] = '200';
$handler->display->display_options['fields']['body']['alter']['more_link_path'] = '[path]';
$handler->display->display_options['fields']['body']['alter']['trim'] = TRUE;
$handler->display->display_options['fields']['body']['element_label_colon'] = FALSE;
/* Field: Content: Currently Accepting Applications */
$handler->display->display_options['fields']['field_accepting_applications']['id'] = 'field_accepting_applications';
$handler->display->display_options['fields']['field_accepting_applications']['table'] = 'field_data_field_accepting_applications';
$handler->display->display_options['fields']['field_accepting_applications']['field'] = 'field_accepting_applications';
$handler->display->display_options['fields']['field_accepting_applications']['label'] = '';
$handler->display->display_options['fields']['field_accepting_applications']['exclude'] = TRUE;
$handler->display->display_options['fields']['field_accepting_applications']['element_label_colon'] = FALSE;
/* Field: Content: Link */
$handler->display->display_options['fields']['view_node']['id'] = 'view_node';
$handler->display->display_options['fields']['view_node']['table'] = 'views_entity_node';
$handler->display->display_options['fields']['view_node']['field'] = 'view_node';
$handler->display->display_options['fields']['view_node']['label'] = '';
$handler->display->display_options['fields']['view_node']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['view_node']['text'] = 'Full Member Profile »';
/* Sort criterion: Content: Currently Accepting Applications (field_accepting_applications) */
$handler->display->display_options['sorts']['field_accepting_applications_value']['id'] = 'field_accepting_applications_value';
$handler->display->display_options['sorts']['field_accepting_applications_value']['table'] = 'field_data_field_accepting_applications';
$handler->display->display_options['sorts']['field_accepting_applications_value']['field'] = 'field_accepting_applications_value';
$handler->display->display_options['sorts']['field_accepting_applications_value']['order'] = 'DESC';
/* Filter criterion: Content: Published */
$handler->display->display_options['filters']['status']['id'] = 'status';
$handler->display->display_options['filters']['status']['table'] = 'node';
$handler->display->display_options['filters']['status']['field'] = 'status';
$handler->display->display_options['filters']['status']['value'] = 1;
$handler->display->display_options['filters']['status']['group'] = 1;
$handler->display->display_options['filters']['status']['expose']['operator'] = FALSE;
/* Filter criterion: Content: Type */
$handler->display->display_options['filters']['type']['id'] = 'type';
$handler->display->display_options['filters']['type']['table'] = 'node';
$handler->display->display_options['filters']['type']['field'] = 'type';
$handler->display->display_options['filters']['type']['value'] = array(
  'member' => 'member',
);

/* Display: Coalition Members Page */
$handler = $view->new_display('page', 'Coalition Members Page', 'page');
$handler->display->display_options['path'] = 'members';
$handler->display->display_options['menu']['type'] = 'normal';
$handler->display->display_options['menu']['title'] = 'Coalition Members';
$handler->display->display_options['menu']['name'] = 'main-menu';

/* Display: Coalition Home Page Slideshow */
$handler = $view->new_display('block', 'Coalition Home Page Slideshow', 'block_1');
$handler->display->display_options['defaults']['css_class'] = FALSE;
$handler->display->display_options['css_class'] = 'members-block';
$handler->display->display_options['defaults']['pager'] = FALSE;
$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'] = 'coalition_slideshow';
$handler->display->display_options['style_options']['id'] = 'coalition-members';
$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['row_options']['default_field_elements'] = FALSE;
$handler->display->display_options['defaults']['row_options'] = FALSE;
$handler->display->display_options['defaults']['fields'] = FALSE;
/* Field: Content: Logo */
$handler->display->display_options['fields']['field_member_logo']['id'] = 'field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['table'] = 'field_data_field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['field'] = 'field_member_logo';
$handler->display->display_options['fields']['field_member_logo']['label'] = '';
$handler->display->display_options['fields']['field_member_logo']['element_label_colon'] = FALSE;
$handler->display->display_options['fields']['field_member_logo']['click_sort_column'] = 'fid';
$handler->display->display_options['fields']['field_member_logo']['settings'] = array(
  'image_style' => 'coalition_slideshow',
  'image_link' => 'content',
);
$handler->display->display_options['defaults']['sorts'] = FALSE;
/* Sort criterion: Global: Random */
$handler->display->display_options['sorts']['random']['id'] = 'random';
$handler->display->display_options['sorts']['random']['table'] = 'views';
$handler->display->display_options['sorts']['random']['field'] = 'random';
$handler->display->display_options['block_description'] = 'Coalition Home Flexslider';

scotself: Your view seems fine. I just used latest dev of flexslider on a project using views and everything works as designed. Feel free to PM me. I'll be happy to take a look at your site and try to help you out

Hi everyone,

After a lot of work, I could configure in Drupal 7 a FlexSlider with a Carousel with multiple items.
Each item is defined in its own "li", so I did not merge multiple items inside the same "li".

Basically, I followed this tutorial in order to configure the creation of the FlexSlider through JavaScript code. Then, I created a View with an Unordered List (UL with LI elements) of images that will appear on the FlexSlider Carousel. That view does not have any specific configuration regarding the FlexSlider Drupal module. The view does not use that module.

My JavaScript code looks as follows:

(function($) {
    Drupal.behaviors.slideShow = {
        attach: function(context) {
            $(document).ready(function() {
                $(".views-field-my-field-collection-name:first ul:first").addClass("slides");
                $(".views-field-my-field-collection-name").flexslider({
                    animation: "slide",
                    animationLoop: false,
                    prevText: "",
                    nextText: "",
                    controlNav: false,
                    itemWidth: 200,
                    itemMargin: 10,
                    minItems: 2,
                    maxItems: 6
                });
            });
        }
    }
}(jQuery));

After saving the View and flushing all caches I obtained the following slider:

Some assumptions and comments:

1) The arrow icons (next/prev) are customized. So they do not appear in the original FlexSlider CSS file.

2) In order to make the "itemMargin" option to work, you need to specify a CSS declaration for the "ul.slides li" elements with the same "itemMargin" value:

.slides > li {
  margin-right: 10px;
}

3) If you want, you can specify specific display behaviour for your carousel images. For example, you can use Shadowbox module in order to enlarge each image when you click over them.

I was trying to do this same thing for a logo-slider, Drupal 7 > Views 3.

Was able to do it out-of-the-box with no custom code (other than some theming for polish), but it wasn't obvious and actually took a could of hours of blind-squirrelling it.

Flexslider settings as follows:
Starting Slide = 1
Item Width = 100px
Item margin = 10px
Minimum Items = 2
Max Items = 10
Move = 1
Animation = Slide (this was the sticker that I couldn't find in any other posts—default flexslider is fade, and that will constantly 9and ovbiously) only allow one image at a time. Setting to 'slide' along with the rest of the options above, works like a charm).

Hope this helps someone.

@ec-adam.... thank you. thank you. thank you. I could spend 40 hours writing thank you to you and still save time compared to hunting this problem down on my own. That slide / fade option did it!

I can also add a bit THANK YOU to @ec-adam for noting the option of "slide" as a sticking point. Without this setting the mutli-slide option carousel will not work.

@ec-adam tx, saved a lot of time