At this time, FlexSlider 2 for concrete5 comes with five slider types.

1.  Image slider
2.  Layout slider
3.  Page list slider
4.  Product list slider
5.  Thumbnail nav slider

Image Slider

Animation Behavior

Fade animation does not support multiple images per slider. To display multiple images per slide, animation type "slide" must be used.

Slide animation does not support "Allow height of the slider to animate smoothly in horizontal mode" setting. This means it will not automatically adjust its height if each image has a different height. It will display at the height you set it at. If you would like your slider to automatically adjust its height to different size images, animation type "fade" must be used.

Image size and cropping

To keep your images their original widths, set the width size to 0. If slider width is set to 0 images will not crop even if force crop is set to true.

If you would like to force all images in your slider to have the same width and height, set "force crop" to true and give the slider a specified width and height.

Setting force crop to true will automatically generate new images cropped to the size specified making all images the same aspect ratio.

If a both width and height are specified and force crop is set to false it will still create a new image but it will keep the images original aspect ratios. This means there is a chance that each image in the slide could have a different height.

If you put a width and hight different then 0, no matter what you choose for crop it will still create a new image. If you put 0 to width or height it will make new images to the specified width or height but it will not crop the images even if force crop is set to true.

For force crop to work a value for both width and height must be set. If either width or height is set to 0 the image will not crop.

Multiple Images Per Slide

It is recommended to use force crop for multi image slides to obtain the same aspect ratio and size for each image.

Animation type "slide" supports multiple images per slide.

Animation type "fade" does NOT support multiple images per slide.

When setting a slider to display multiple images per slide, the size setting that is specified is the size for each image in the slide. For example, if you set the size of the slider image to be 300x200, each image in the slider would be 300x200.

Custom templates

FlexSlider 2 for concrete5, at this time, includes 4 custom templates for image sliders.

1.  Flex Image Default

2.  Flex Image White

3.  Flex Image Black

After an image slider is added to a page one of the three included custom templates must to be selected.

Adding an image slider to a page

Put your page in edit mode.

Click on the editable area you would like to add the slider to and select FlexSlider from the list of available blocks.

Configure your sliders images, size, animation settings, etc. then click add.

After the slider is added to the page, click on it again. From the pop up window select "custom template"

Select one of the four custom templates for an image slider.

Click save.

Exit edit mode and publish edits.

Approve version if necessary.

Titles and captions

Titles and captions are available for "image" sliders only.

At this time this functionality is not possible with "file sets".

It is possible however, to use the single image slider to load multiple images from a file set into the slider at the same time.

When the file manager window loads, at the top of the window, click inside the input labeled "In Set(s)"

Click on the file set that you would like to add to the slider.

If the number of images is greater then 10 adjust the "# Per Page" to display the amount needed.

After the file set loads into the window, click the check box at the top left corner of the window to select all of the images in the set.

Once the images are all checked, right above it, click on the drop menu that says "**With Selected".

Click on "Choose"

This will load all of the selected images from the file set into the slider at the same time with the ability to set links, titles and captions.

CDN (content delivery network)

Image slider types support FlexSliders built in CDN functionality.

It supports CDN services that offer a url.

If you have a CDN that provides a URL, under the CDN tab set "Enable CDN" to "true"

Enter the URL for your CDN.

Include http:// but do not include a trailing slash /

Example: http://www.cdn.yourdomain.com

Layout Slider

A layout slider is FlexSider 2 for concrete5's most powerful slider. With a layout slider you can slide just about anything including content, blocks, HTML, image galleries, flash, forms video etc, etc…


Animation behavior

Fade animation does not support multiple carousels per slide. To display multiple carousels per slide, animation type "slide" must be used.

Slide animation does not support "Allow height of the slider to animate smoothly in horizontal mode" setting. This means it will not automatically adjust its height if each slide has a different height. It will display at the height you set it at. If you would like your slider to automatically adjust its height to different heights, animation type "fade" must be used.

Image size and cropping

Layout sliders do NOT support image cropping. This setting has no effect on the slider even if set to true.

Width and height settings are supported.

Multiple Items Per Slide

Animation type "slide" supports multiple items per slide.

Animation type "fade" does NOT support multiple items per slide.

When configuring a slider to display multiple items per slide, the size that is specified for width and height is the size for each item in the slide. For example, if you set the size of the slider to be 300x200, each item in the slider would be 300x200. Experiment with it some to get a feel for its functionality.

Custom templates

FlexSlider 2 for concrete5, at this time, includes 3 custom templates for layout sliders.

  1.    Flex Layout Default
  2.    Flex Layout White
  3.    Flex Layout Black

After a layout slider is added to a page one of the three included custom templates for a layout must to be selected.

Adding a layout slider to a page

Put your page in edit mode.

Click on the editable area that you would like to add a layout slider to and select "Add Layout"

Set the amount of columns and rows that you would like in your layout and click save.

Each row in a layout is treated as a slide. It does not matter how many columns are in a row, it will slide the row with columns included.

Example. 6 rows = 6 slides.

Add content to each section in the layout using concrete5 blocks.

At the bottom of the layout, add a FlexSlider block to the editable area just below the last layout cell, making sure to not add it inside of the layout. If the Flexslider block is added inside of the layout, it can effect its appearance and functionality.

(it is not required to put the flexslider block in the same location as the layout, although it is recommended for keeping track of sliders if using multiple on the same page. )

For the slider type select "layout".

From the layout area name drop down, select the layout name/position of the area that you just set up. (note: a layout must be added to the page before it will become available in the drop down selection)

Configure the sliders size, animation, speed, etc, etc then click save.

After the FlexSlider block is added to the page, click on it. From the pop up select "custom template"

Select one of the three custom templates available for a layout slider from the drop down menu.

Click save.

Exit edit mode and publish edits.

Approve version if necessary.

YouTube API custom templates

(used to stop youtube video from playing when slider slides to next slide)

FlexSlider 2 comes with 2 custom custom templates for the default concrete5 youtube block.

1) Youtube Obj

2) Youtube Collector

If you are planning to have multiple videos loaded in the slider, both custom templates will need to be used.

If you are planning to load a single video then one custom template will need to be used.

Multiple YouTube Videos

Starting at the top of your layout set the custom template "Youtube Obj" on each youtube block.

On the last video at the bottom of the layout set the custom template "Youtube Collector"

If using multiple layout sliders on the same page then the only the last layout and last video will need the "Youtube Collector" custom template set.

Single YouTube Video

If loading a single video into your slider, set the custom template "Youtube Collector" on the youtube block.??

Multipe video sliders on one page are supported but not with the stop function at this time.

CDN (content delivery network)

Layout sliders, at this time, do not support CDN functionality

Page List Slider

A page list slider provides the ability to set a FlexSlider image attribute to pages in your site map. These images are then used for display in the page list slider. (page list sliders at this time do not support site wide editable areas)


Animation behavior

Fade animation does not support multiple pages (images) per slide. To display multiple pages (images) per slide, animation type "slide" must be used.

Slide animation does not support "Allow height of the slider to animate smoothly in horizontal mode" setting. This means it will not automatically adjust its height if each image has a different height. It will display at the height you set it at. If you would like your slider to automatically adjust its height to different size images, animation type  "fade" must be used.

Image size and cropping

Page list sliders, at this time, do NOT support image cropping. This setting has no effect on the slider even if set to true.??Width and height are supported

Multiple Pages/Images Per Slide

Animation type "slide" supports multiple pages/images per slide.

Animation type "fade" does NOT support multiple pages/images per slide.

When configuring a slider to display multiple pages/images per slide, the size that is specified for width and height is the size that will be set for each item in the slide. For example, if you set the size of the slider to be 300x200, each page/image in the slider would be 300x200.

Experiment with it some to get a feel for its functionality.

Custom templates

FlexSlider 2 for concrete5, at this time, includes 4 custom templates for page list sliders.

    1.    Flex Page List Default
    2.    Flex Page List White
    3.    Flex Page List Black
    4.    Flex Page List Bootstrap

After a page list slider is added to a page, one of these four included custom templates for a page list must to be selected.

Adding a page list slider to a page

First go to the site map in your concrete5 dashboard.

On each page that you would like to display in your page list slider, a FlexSlider image attribute needs to be set along with an image.

To do this click on the pages in your site map that you would like to add an image to and from the pop up on each page select "properties"

Under the "custom attributes" tab on the left side, scroll down and click on "Flexslider page list img"

Scroll back up and on the flex slider img attribute click "choose file" and select an image from your file manager.

Click save.

Do this same procedure for each page that will display in your page list slider.

Now visit the page you are adding the page list slider to.

Put the page in edit mode.

Click on the editable area that you would like to add a page list slider to and select "add block"

Select "page list" from the list of available blocks.

Set which pages are displayed in the page list.

Click add.

After the page list is added to the page, click on it. From the pop up window select custom template.

Select one of the three available custom templates for a page list slider from the drop down menu.

Click save.

Under the page list add a FlexSlider block. ( it is not required to put the flexslider block in the same location as the page list although it is recommended for keeping track of sliders if using multiple on the same page)

For the slider type select "page list".

From the drop down menu, select the area/position of the page list that was added to the page. (note: a page list must be added to the page before it will become available in the drop down selection)

Configure the sliders size, animation, speed, etc, etc then click save.

After the FlexSlider block is added to the page, click on it. From the pop up select "custom template"

Select the same custom template that you selected for the page list from the drop down menu. (Note: these two templates must match on both the page list block and flexslider block)

Click save.

Exit edit mode and publish edits.

Approve version if necessary.

CDN (content delivery network)

Page list sliders, at this time, do not support CDN functionality.

Product List Slider

A product list slider provides the ability to slide eCommerce products if concrete5s eCommerce add-on is installed. eCommerce is not included with FlexSlider 2 and is sold separately.


Animation behavior

Fade animation does not support multiple eCommerce products per slide. To display multiple eCommerce products per slide, animation type "slide" must be used.

Slide animation does not support "Allow height of the slider to animate smoothly in horizontal mode" setting. This means it will not automatically adjust its height if each slide has a different height. It will display at the height you set it at. If you would like the slider to automatically adjust its height, animation type "fade" must be used.

Image size and cropping

A product list slider will display its images the size that you specify inside the product list block.

Multiple Products Per Slide

Animation type "slide" supports multiple products per slide.

Animation type "fade" does NOT support multiple products per slide.

When configuring a slider to display multiple products per slide, the size that is specified for width and height is the size that will be set for each product in the slide. For example, if you set the size of the slider to be 300x200, each product in the slider would be 300x200.

Experiment with it some to get a feel for its functionality.

Custom templates

FlexSlider 2 for concrete5, at this time, includes 3 custom templates for product list sliders.

 1.    Flex Product List Default
 2.    Flex Product List White
 3.    Flex Product List Black

After a product list slider is added to a page, one of the three included custom templates for a product list slider must to be selected.

Functionality

A product list slider depends on concrete5s eCommerce add-on to function. If you do not have eCommerce installed and products configured, this slider version will not function.

A product list slider at this time supports 1 product list slider per page.

Adding a product list slider to a page

To add a product list slider to a page, put the page in edit mode.

Click on the editable area that you would like to add a product list slider to and select "add block"

Select "product list" from the list of available blocks and add it to the page.

Select which types of products you would like to display in your slider under the "Search" tab.

Select how you would like your products to layout under the "Data Formatting"
tab.

Under the "Results Layout" tab set results per row to "1". This is the ONLY requirement. The rest of the settings in the product list are optional.

After the product list has been added to the page, click on it. From the pop up window select custom template.

Select one of the three available custom templates for a product list from the drop down menu and click save.

Below are the exact settings we have on the product list on our demo.

Under the product list block add a flexslider block and set the slider type to "product list"

Configure the sliders size, animation, speed, etc, etc then click save.

After the flexslider block is added to the page, click on it. From the pop up window select custom template.

Select the same name (matching) custom template that you selected for the product list block.

Click save.

Exit edit mode and publish edits.

Approve version if necessary.

Below are the exact settings we have on our demo.

CDN (content delivery network)

Product list sliders, at this time, do not support CDN functionality

Thumbnail Nav Slider

A thumbnail slider works with image slider types only. It generates thumbnails of each image in your slider and displays them as a thumbnail navigation carousel below the main slider.

The size you specify the slider to be will automatically determine the size of the thumbnails generated for the carousel navigation.


Custom Templates

1.    Flex Image Thumbnail

Adding a thumbnail navigation slider to a page

Put your page in edit mode.

Click on the editable area that you would like to add the slider to and select FlexSlider from the list of available blocks.

Configure the sliders images.

Set the animation type to slide. (Note: Thumbnail nav slider does NOT support animation type "fade". If set on fade slider will not function)

Set the size of the slider to the size that you would like the top image to be. (Note:It is recommended to enable force crop)

After the slider is added to the page, click on it again. From the pop up window select "custom template"

Select "Flex Image Thumbnail" from the drop down menu.

Click save.

Exit edit mode and publish edits.

Approve version if necessary.

If you would like to set spacing between the thumbnail images, you will need to add some css code to the theme you are using.

Add this code to the bottom of your themes main css file and set the spacing to the desired amount.

.flex-control-thumbs li { margin: 0 5px 0 0;}

CDN (content delivery network)

Image slider types support FlexSliders built in CDN functionality.

It supports CDN services that offer a url.

If you have a CDN that provides a URL, under the CDN tab set "Enable CDN" to "true"

Enter the URL for your CDN.

Include http:// but do not include a trailing slash /

Example: http://www.cdn.yourdomain.com