BuildFire Carousel Component

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/carousel/

⚠️⚠️⚠️

buildfire.components.carousel

This name space 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

The Editor

Typically used on the control side to add, edit and delete images from your carousel.

Requirements

    <!-- 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>

Example

https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/control/content/index.html

Constructor

var editor = new buildfire.components.carousel.editor([selector],[items optional]);

• selector typical css selection string to identify the containing element
• items loads any previously saved items. items are of type actionItem see Action Items

Methods

• editor.init: a secondary method outside of the constructor to initialize the component
• editor.loadItems(items, appendItems) use this method to load the carousel with new items or pass true in editor.appendItems to append items to the existing list
• editor.append: allows you to append a single item or multiple items at once. Items are of type actionItem see Action Items
• editor.clear: use this method to clear out all your items form the carousel

Handlers

• editor.onAddItems(items) an overridable handler that is called when an item is added
• editor.onDeleteItem(item) an overridable handler that is called when an item is deleted
• editor.onItemChange(item) an overridable handler that is called when an item is changed
• editor.onOrderChange(item, oldIndex, newIndex) an overridable handler that is called when an item is changed

The Viewer

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

Requirements

      <!-- 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 type="text/javascript" src="../../../scripts/owlCarousel/owlCarousel.js"></script>
    <script src="../../../scripts/buildfire/components/carousel/carousel.js"></script>

Example

https://github.com/BuildFire/simpleBuildFireJSExamples/blob/master/exampleCarousel/widget/index.html

Constructor

var viewer = new buildfire.components.carousel.view([selector],[items optional], [mode optional]);

• selector typical css selection string to identify the containing element
• items loads any previously saved items. items are of type actionItem see Action Items
• mode a string that determines the display mode in which you want to show the slider default 'WideScreen', the possible values are:
  • WideScreen: 16:9 proportion
  • Square: a square 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 proportion

Note: if you don't have [items optional] and you want to pass [mode optional] pass the second parameter [items optional] as an empty array example ("#selector", [], "WideScreen")

Methods

• viewer.init: a secondary method outside of the constructor to initialize the component
• viewer.loadItems(items, appendItems) use this method to load the carousel with new items or pass true in appendItems to append items to the existing list
• viewer.append: allows you to append a single item or multiple items at once. Items are of type actionItem see Action Items