Any pointers how to make a carousel like the one at huffington post? [#1999468]

Any pointers how to make a carousel like the one at Huffington post?
I know Drupal reasonably well but I am stumped as to how to start on this.

http://www.huffingtonpost.co.uk/2013/05/20/legal-aid-francis-fitzgibbon_...

Thanks

Comments

Comment #1

greg.b CreditAttribution: greg.b commented 22 May 2013 at 14:29

Ok, my mistake was not setting Item and margin width. so the carousel would not appear. I only had 1 pic.

Here is the relevant part from the readme. Hope it helps someone.

"Carousels
---------
Carousels can be created with Flexslider2 by setting an Item Width for images and a Margin Width in the optionset. Use the flexslider_thumbnail image style and set your item width to fit the desired number of images into the div space available. NOTE: the margin width setting should correspond IN PIXELS to the margin widths set by your img CSS in your theme. This will allow Flexslider to properly calculate the "total width" of the image+margins so that horizontal scrolling behaves properly.

Flexslider Views
----------------

Flex Slider Views allows you to build views which display their results in Flex Slider. Similarly to how you can output fields as an "HTML List" or "Table", you can now select "Flex Slider" as an option.

Create or edit a view and ensure it can load a content type which contain image fields. Set your display fields to include an image field. In the field settings, DO NOT SET THE FORMATTER TO FLEXSLIDER. This will attempt to put Flex Sliders inside other Flex Sliders and will just get messy. Ensure you don't include any wrapper markup, labels or container markup for the field value itself. Save your field.

Next, go to "Format" in the main Views windows. Click and select "Flex Slider", then select your option set. Save your view and you should see your results displayed in Flex Slider."

Comment #2

greg.b CreditAttribution: greg.b commented 22 May 2013 at 14:30

Status:

Active

» Closed (fixed)

Comment #3

sokrplare CreditAttribution: sokrplare commented 24 May 2013 at 21:45

Adding a few more notes since this didn't quite do the trick for me (at least using Flexslider Fields - maybe it would do it for Views).

Working from the "default" FlexSlider option set - these are a few settings that should be a minimum required to see a demo of the carousel capability:

Animation: Slide
Item Width: 210
Item Margin: 5
Minimum Items: 2
Max Items: 2
Move: 0

Comment #4

Problue Solutions

Northern Ireland

CreditAttribution: Problue Solutions commented 19 June 2013 at 21:02

Status:

Closed (fixed)

» Active

I've followed the instructions above and cannot get this to work, my slideshow always displays just one item no matter what I set in minimum items in the option set.

I've tried using both the standard views flexslider format and also views slidehow flexslider, same result with both, no matter I do only one item ever appears in the slideshow.

The view is set to display all items and there is more than one piece of content in the view.

Any ideas?

Comment #5

philipz CreditAttribution: philipz commented 9 October 2013 at 13:02

I have similar problem. No matter what settings I have in my custom options set the view generates rows with style having width: 100% and displays only one image at a time.

Edit:
Now I see that changing animation to fade causes the problem. When set to slide the carousel items display more or less as they should.
Sometimes they are not visible but appear after a moment or on mouse hover but this might be a separate issue.