Carousel
buildfire.components.carousel
#
This namespace consists of two major classes:
editor
which is the class that instantiates the editor component typically used on the control side to add, edit and delete images from your carouselview
which is the class that instantiates the viewer component typically used on the widget side to display the carousel images and handle clicks and actions of images
#
Requirements#
Control#
Widgeteditor
#
Class instance for carousel editor. Typically used on the control side to add, edit and delete carousel action items.
In your controller body create an html container element for carousel editor
editor()
#
let editor = new buildfire.components.carousel.editor(selector, items);
Carousel editor class constructor method which initializes the sortable list component.
For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/control/content/index.html
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
selector | string | yes | Css selector of element that will contain the sortable list | |
items | [object] | no | Optional array of items to be preloaded into sortable list. For possilble objects see Action Items |
#
More Examples#
Methodseditor.loadItems()
#
editor.loadItems(items, appendItems)
Loads new items into the list
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
items | [object] | yes | Array of items to be loaded into sortable list. For possilble objects see Action Items | |
appendItems | boolean | no | If true it will append items to list, otherwise it will replace the list | false |
editor.append()
#
editor.append(items)
Appends an item or many items to the list
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
items | [object] | object | yes | Array of items, or sigle item to be appended to sortable list. For possilble objects see Action Items |
editor.clear()
#
editor.clear(items)
Clears the sortable list
#
HandlersHandlers are overridable functions that serve as event listener when items are added, edited removed or reordered.
tip
You can use handler methods to persist data to datastore
editor.onItemChange()
#
editor.onItemChange(item, index)
Will be triggered when item in list is edited
#
ArgumentsName | Type | Description |
---|---|---|
item | object | Action item object. See Action Items |
index | number | Action item index in list |
editor.onOrderChange()
#
editor.onOrderChange(item, oldIndex, newIndex)
Will be triggered when item in list is reordered
#
ArgumentsName | Type | Description |
---|---|---|
item | object | Action item object. See Action Items |
oldIndex | number | Old action item index in list |
newIndex | number | New action item index in list |
editor.onAddItems()
#
editor.onAddItems(items)
Will be triggered when new item is added to list, item index will be items.length
#
ArgumentsName | Type | Description |
---|---|---|
items | object | Array of action item objects. See Action Items |
editor.onDeleteItem()
#
editor.onDeleteItem(item, index)
Will be triggered when item is deleted from the list
#
ArgumentsName | Type | Description |
---|---|---|
item | object | Array of action item objects. See Action Items |
index | number | Index of delted item |
view
#
Class instance for carousel viewer. Typically used on the widget side to display the carousel images and handle clicks and actions of images.
In your widget body create an html container element for carousel viewer
For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/widget/index.html
view()
#
let viewer = new buildfire.components.carousel.view(selector, items, mode);
Carousel viewer class constructor method which initializes the carousel viewer.
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
selector | string | yes | Css selector of element that will contain the carousel | |
items | [object] | no | Optional array of items to be loaded into carousel. For possilble objects see Action Items | |
mode | string | no | Determines the display mode in which you want to show the slider |
note
If you don't have items
and you want to pass mode
, pass the second parameter as an empty array ex (".carousel", [], "WideScreen")
mode
#
Possible values for mode
argument
Name | Description |
---|---|
"WideScreen" | 16:9 aspect ratio |
"Square" | 1:1 acpect ratio where the width and height will be the device with (note the max image width is 380px so if your image is taller than this value it will scale down to 380px) |
"Cinema" | 2.39:1 aspect ratio |
#
More Examples#
Methodsview.loadItems()
#
view.loadItems(items, appendItems)
Loads new items into the carousel
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
items | [object] | yes | Array of items to be loaded into sortable list. For possilble objects see Action Items | |
appendItems | boolean | no | If true it will append items to list, otherwise it will replace the list | false |
view.append()
#
view.append(items)
Appends an item or many items to the list
#
ArgumentsName | Type | Required | Description | Default |
---|---|---|---|---|
items | [object] | object | yes | Array of items, or sigle item to be appended to sortable list. For possilble objects see Action Items |