Skip to main content

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 carousel
  • view which is the class that instantiates the viewer component typically used on the widget side to display the carousel images and handle the click and action of the images

Requirements#

Control#

<head>
<!-- Load helper.css to use our helper classes -->
<link href="../../../../styles/helper.css" rel="stylesheet" />
<link href="../../../../styles/siteIcons.css" rel="stylesheet" />
<!-- JS -->
<script src="../../../../scripts/jquery/jquery-1.11.2.min.js"></script>
<script src="../../../../scripts/buildfire.js"></script>
<script src="../../../../scripts/sortable.min.js"></script>
<script src="../../../../scripts/buildfire/components/carousel/carousel.js"></script>
</head>

Widget#

<head>
<!-- CSS -->
<link href="../../../scripts/owlCarousel/owlCarousel.css" rel="stylesheet" />
<!-- JS -->
<script src="../../../scripts/buildfire.js"></script>
<script src="../../../scripts/jquery/jquery-1.11.2.min.js"></script>
<script src="../../../scripts/owlCarousel/owlCarousel.js"></script>
<script src="../../../scripts/buildfire/components/carousel/carousel.js"></script>
</head>

editor#

Class instance for carousel editor. Typically used on the control side to add, edit and delete carousel action items.

Editor

In your controller body create an html container element for carousel editor

<body>
<div class="editor"></div>
</body>

Methods#

editor()
#

let editor = new buildfire.components.carousel.editor(selector, items);

Carousel editor class constructor method.

let editor = new buildfire.components.carousel.editor(".carousel", []);

For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/control/content/index.html

Arguments#

NameTypeRequiredDescriptionDefault
selectorstringyesCss selector of element that will contain the sortable list
items[object]noOptional array of items to be preloaded into sortable list. For possilble objects see Action Items

editor.init()
#

editor.init()

Initializes the sortable list component.

let editor = new buildfire.components.carousel.editor(".carousel");
editor.init();

editor.loadItems()
#

editor.loadItems(items, appendItems)

Loads new items into the list

let editor = new buildfire.components.carousel.editor(".carousel");
editor.loadItems([
{
title: "build fire",
url: "https://www.facebook.com/buildfireapps",
action: "linkToWeb",
openIn: "_blank",
iconUrl: "https://placekitten.com/800/400",
},
]);

Arguments#

NameTypeRequiredDescriptionDefault
items[object]yesArray of items to be loaded into sortable list. For possilble objects see Action Items
appendItemsbooleannoIf true it will append items to list, otherwise it will replace the listfalse

editor.append()
#

editor.append(items)

Appends an item or many items to the list

let editor = new buildfire.components.carousel.editor(".carousel");
editor.append([
{
title: "build fire",
url: "https://www.facebook.com/buildfireapps",
action: "linkToWeb",
openIn: "_blank",
iconUrl: "https://placekitten.com/800/400",
},
]);

Arguments#

NameTypeRequiredDescriptionDefault
items[object] | objectyesArray 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

let editor = new buildfire.components.carousel.editor(".carousel");
editor.clear();

Handlers#

Handlers 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

let editor = new buildfire.components.carousel.editor(".carousel");
editor.onItemChange = (item, index) => {
console.log(`Item on index ${index} changed`, item);
};

Arguments#

NameTypeDescription
itemobjectAction item object. See Action Items
indexnumberAction item index in list

editor.onOrderChange()
#

editor.onOrderChange(item, oldIndex, newIndex)

Will be triggered when item in list is reordered

let editor = new buildfire.components.carousel.editor(".carousel");
editor.onOrderChange = (item, oldIndex, newIndex) => {
console.log("Item", item, `reordered from ${oldIndex} to ${newIndex}`);
};

Arguments#

NameTypeDescription
itemobjectAction item object. See Action Items
oldIndexnumberOld action item index in list
newIndexnumberNew 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

let editor = new buildfire.components.carousel.editor(".carousel");
editor.onAddItems = (items) => {
console.log("New item added. Items are", items);
};

Arguments#

NameTypeDescription
itemsobjectArray of action item objects. See Action Items

editor.onDeleteItem()
#

editor.onDeleteItem(item, index)

Will be triggered when item is deleted from the list

let editor = new buildfire.components.carousel.editor(".carousel");
editor.onDeleteItem = (item, index) => {
console.log(
`Item was delted from the list on index ${index}. Item was`,
item
);
};

Arguments#

NameTypeDescription
itemobjectArray of action item objects. See Action Items
indexnumberIndex of delted item

view#

Class instance for carousel viewer. Typically used on the widget side to display the carousel images and handle the click and action of the images.

Viewer

In your widget body create an html container element for carousel viewer

<body>
<div class="editor"></div>
</body>

For full example see https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/widget/index.html

Methods#

view()
#

let viewer = new buildfire.components.carousel.view(selector, items, mode);

Carousel viewer class constructor method.

let viewer = new buildfire.components.carousel.view(".carousel");

Arguments#

NameTypeRequiredDescriptionDefault
selectorstringyesCss selector of element that will contain the carousel
items[object]noOptional array of items to be loaded into carousel. For possilble objects see Action Items
modestringnoDetermines 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

NameDescription
"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

view.init()
#

view.init()

Initializes the carousel viewer.

let viewer = new buildfire.components.carousel.view(".carousel");
viewer.init();

view.loadItems()
#

view.loadItems(items, appendItems)

Loads new items into the carousel

let viewer = new buildfire.components.carousel.view(".carousel");
viewer.loadItems([
{
title: "build fire",
url: "https://www.facebook.com/buildfireapps",
action: "linkToWeb",
openIn: "_blank",
iconUrl: "https://placekitten.com/800/400",
},
]);

Arguments#

NameTypeRequiredDescriptionDefault
items[object]yesArray of items to be loaded into sortable list. For possilble objects see Action Items
appendItemsbooleannoIf true it will append items to list, otherwise it will replace the listfalse

view.append()
#

view.append(items)

Appends an item or many items to the list

let viewer = new buildfire.components.carousel.view(".carousel");
viewer.append([
{
title: "build fire",
url: "https://www.facebook.com/buildfireapps",
action: "linkToWeb",
openIn: "_blank",
iconUrl: "https://placekitten.com/800/400",
},
]);

Arguments#

NameTypeRequiredDescriptionDefault
items[object] | objectyesArray of items, or sigle item to be appended to sortable list. For possilble objects see Action Items