Carousel

Think in & out the box

HTML carousel

Use this carousel to show any kind of html content.

HTML carousel with controls inside

HTML carousel with controls inside on hover

HTML carousel with no controls

Images carousel

Use this carousel to show images. The images on carousel are fully compatible with lazy load & responsive images.

Video carousel

Use this carousel to display online videos.

Carousel with set width items

When your carousel items have set width, e.g. 200px, but carousel-container itself is flexible e.g. fullwidth. This option calculates how many items best fit into the container.


Attributes

data-fc-items

The number of items you want to see on the screen.

DEFAULT: 1

data-fc-nav

Show next/prev buttons.

DEFAULT: true

data-fc-margin

margin-right(px) on item

DEFAULT: 10

data-fc-video

Enable fetching YouTube/Vimeo videos.

DEFAULT: true

data-fc-video-width

Width of the videos.

DEFAULT: 100%

data-fc-video-height

Height of the videos.

DEFAULT: 300

data-fc-center

Center item. Works well with even an odd number of items.

DEFAULT: true

data-fc-autoplay

Autoplay

DEFAULT: true

data-fc-device-items

The number of items you want to see on the screen separated by coma. First number is on mobile, second on tablet and third in desktop.

DEFAULT: 1,1,1

data-fc-controls

Defines how to show the controls of the carousel. Posible values are: true, false, hover, inside

DEFAULT: true

data-fc-items-width

Defines width (in px) for each item.

DEFAULT: false