Documentation
Product Carousel
Allows user to swipe or use mouse to navigate from one carousel item to another from left to right or from right to left.
The location to view this component / control as a demo or in more detail click here.
Below will give you information on how to integrate the web component / control into your web application.
The CSS and script files you must add to the page for the Product Carousel to function would be as so:-
The html must be exactly how the structure of the html looks in the code snippet below:-
How to use the JavaScript Plugin
Below is how to implement the plugin using a selector, once the plugin is installed and added to the selector, the product carousel will take effect and give you the carousel slider as shown here at the demo page here.
Available Settings
Below shows what settings can be initialized so that you can set how the carousel will be loaded at first instance when the plugin loads on the page.
Properties
Values
Description
height
Default value is
null
or the height can take a value of
int
.
This property allows you to set the height of the carousel item, if left blank then the height will be dynamic.
width
Default value is set to
"90%"
, but the value can take
int
values.
Set the width of the carousel container.
showItems
Default value is
5
, this allows the carousel to display initial items when the page is at full screen. Value takes in
int
values.
When the page is at full screen or at desktop level, the number of show items you set will be displayed initially.
title
Title is set to a default value,
string
input is only allowed.
The title displays the text, to describe what items within the carousel your are displaying. This can be left blank.
titleFontSize
The default value is
18
takes in only
int
values.
To set the font size of the title when set.
titleColour
The default value is
#000000
, takes in
string
values or
HEX
values.
Sets the colour of the title text.
buttonNavBackgorundColor
Default value is set to
#ffffff
, takes in
string
values or
HEX
values.
Sets the navigation button background colour for previous and next buttons.
buttonNavIconColor
Default value is set to
#212121
, takes in
string
values or
HEX
values.
The icon colour can be set to any hex colour and the icon is set from the Bootstrap Icon library that is set in the html.
buttonDisableNavIconColor
Default value is set to
#EEEEEE
, takes in
string
values or
HEX
values.
This is when the button has reached the first or last item and then the button state is set to disabled.
seperatorWidth
Default is set to
10
, takes in only
int
values.
This property applies a gap between the carousel items.