Description
This widget displays a configurable image based carousel.
Prerequisites
The widget comes preloaded with the required JavaScript libraries and css stylesheets.
JavaScript Libraries
jQuery version 3.2.1
bootstrap-swipe-carousel.js
CSS
bootstrap-min.css
The widget has been designed to use the supplied bootstrap version 4 presentation template which contains the required jQuery JavaScript and css stylesheet.
Installation
Drag the widget from the Widgets View onto the page. This will add the UI element of the widget to the page and also create the following directory structure in the Installed Widgets Project:
Installed Widgets
InstalledWidgets
carousel_{version}
{formName}_{widgetPrefix}carousel
Scripts
configure
Configuration
The configure server-side script in the Installed Widgets project contains the following functions:
config : configures all rendering options for the carousel
getImages : configures the array of images required to populate the carousel
How it works
The widget uses the bootstrap-swipe-carousel.js library. The carousel is activated using a jQuery ready event configured in the HTML Element Properties of the widgets panel. All options that affect the way in which the carousel is displayed are configured in the config() function of the server-side configure script. The images used by the carousel are defined in the getImages() function of the server-side configure script.
Additional Notes
The config() and the getImages() functions run in the context of the widget.
To address elements in the form itself, all script references must be prefixed with "form." e.g.
function getImages()
{
var image1Text = form.fields.image1Text.value;
var imageset = [];
imageset.push(createImage(
'https://vsamples.verj.cloud/apps/carousel/images/img_2.jpg',
'1st slide',
'center center',
image1Text
));
return imageset
}