Frontfire documentation

Carousel plugin

Version 2.1.0

Frontfire UI provides a layout of multiple items that are arranged horizontally and can be scrolled through by swipe gestures. This can be used for large banners or a collection of photos.

This plugin is only available in the Complete bundle.

This plugin depends on the plugins: draggable

Description

A carousel is defined with the carousel CSS class, or by calling the carousel() plugin method on an element. The carousel pages are added as <div> child elements. Items can have arbitrary content and will be arranged to the full width of the carousel so that only a single item is visible, unless multiple items shall be visible.

Below the visible item there is a page indicator that tells the user which is the currently visible page and how many pages there are. The pages can be switched by dragging them to the left or right with any pointing device (mouse, touch, stylus) or by clicking on an indicator item.

The colours of the page indicator can be customised with the CSS variables that start with “--carousel-”.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Multiple visible items

Multiple items can be visible by setting the items option to a number greater than 1. The gutter option can be used to keep same spacing between the items.

3 items out of 6 visible, varying item height:

Item 1
Item 2
Line 2
Line 3
Item 3
Line 2
Item 4
Item 5
Item 6

3 items out of 7 visible:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

3 items out of 7 visible, with individual indicator dots:

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7

4 items out of 2 visible:

Item 1
Item 2

Inline indicator

The indicator dots can be moved to the inside of the carousel by adding the inline-indicator CSS class to the carousel element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Indicator for dark backgrounds

The indicator dots can be inverted for light display on a dark background by adding the dark CSS class to the carousel element or a parent element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

To get back dark indicator dots for a light item background within a dark element, add the not-dark CSS class.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Smaller indicator

The indicator dots size can be decreased by adding the small-indicator CSS class to the carousel element.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Drag cursor

By default, the mouse cursor does not change when interacting with the carousel with a swipe gesture. The drag-cursor option can be used to assign a different mouse cursor during that time.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Autoplay

The following examples have the auto-play option enabled and begin cycling through the items at load time. The animations are paused while the element is hovered by a pointing device and resumed shortly after the pointer leaves the element (twice the interval time). This is to avoid moving away the item when the user is about to click on it or otherwise interact with it.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9

Different animations

The default animation slide-all can be seen in the examples above. A different animation can be selected with the animation option. These animation types are supported:

Item 1
Item 2
Item 3

slide-out

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-in

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Animations with autoplay

slide-out

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-in

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

slide-fade

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6

Options

The following options are available:

Name Type Description Default
active Number The index of the initially active item. 0
animation String The animation between items. See above for the possible values.
For more than one visible item, only slide-all is supported and automatically used.		 slide-all
autoPlay Boolean Starts looping through all items automatically. false
autoPlayInterval Number Autoplay item switch interval, in milliseconds. 4000
dotsEach Number Show an indicator dot each x items. -1 means the same value as items. -1
dragCursor String The mouse cursor to show during dragging. undefined
gutter Number The margin between two items, in pixels. 0
indicator Boolean Shows the indicator dots for the active item. true
items Number The number of items concurrently visible. 1
pauseOnHover Boolean Pauses autoplay while the carousel is hovered with the mouse. true

Plugin properties

This plugin provides properties to access the carousel state.

activeItem

Gets or sets the active item in the first selected carousel. The item can be a Node or a Frontfire instance. If it is a Frontfire instance, only its first selected element will be used.

let activeItem = F("#carousel").carousel.activeItem; F("#carousel").carousel.activeItem = F("#first-item");

activeItemIndex

Gets the index of the active item in the first selected carousel, or sets the index of the active item in all selected carousels. Negative indexes are counted from the end, i.e. -1 is the last item, -2 the second-last etc.

let activeItemIndex = F("#carousel").carousel.activeItemIndex; F("#carousel").carousel.activeItemIndex = 3;

length

Gets the number of the items in the first selected carousel.

let pageCount = F("#carousel").carousel.length;

Added in v2.1.0

Plugin events

This plugin triggers events for the carousel.

activeItemChange

Triggered when the active page has changed.