Image Slider

• Graphics Link

Definition

<cst-img-slider>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-item/>

<sub-item/>

<sub-options />

<sub-help-icon/>

<sub-feature-flag/>

</cst-img-slider>

OR

<cst-element name="img-slider" schema="" schema-prop=""/>

Example

<cst-img-slider id="" >

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-item text="" sub-text="" img-url="" link=""/>

<sub-item text="" sub-text="" img-url="" link=""/>

<sub-options items-prop="" item-text-prop="" item-sub-text-prop=""

item-img-url-prop="" item-link-prop="" navigation-type=""/>

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag is-aspect-ratio="">

</cst-img-slider>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
class	cst-marquee	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-options	object type	Specifies the options of the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	name of the style	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-options

Property	Value	Description
items-prop	string type	Property of item array
item-text-prop	string type	Property of item's text, display as big title.
item-sub-text-prop	string type	Property of item's sub text, display normal text.
item-img-url-prop	string type	Property of item's image path.
item-link-prop	string type	Property of item's link click to redirect on particular link.
navigation-type	string type(below-image, over-image, as-side-image)	Property to display navigation type of slider.

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description
is-aspect-ratio	boolean type	Specifies the aspect ratio of the slider images

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["slider"], //= required

properties: {

slider: {

type: "string",

title:"Slider Images",//= label

cstAttr: {

raw:{ //loop & add to element

disabled : true,

class:'outline cst-class1'

},

subStyle:{ //loop & add to element style

name: '', // Default star

width:'',

height:'',

fontSize:''

},

subOptions:{

itemsProp: '',

itemTextProp: '',

itemSubTextProp: '',

itemLinkProp: '',

itemImgUrlProp: ''

},

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

isAspectRatio: false

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

},

itemsSource: '', //to check in page object

itemsSourceAPI: '',

}

}

}

}

let schemaProp = 'slider';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

let data = [

{

text: '',

subText: '',

imgUrl: '',

link: ''

}

]

Exact schema

let schema = {

type: "string",

title: "Slider", //= label

cstAttr: {

}

}

let schemaProp = '';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.slider';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Events

Attribute	Description
onplayclick	Fires when the play button click.
onpauseclick	Fires when the pause button click.
onnextclick	Fires when the next button click.
onpreviousclick	Fires when the previous button click.
onhover	Fires when the element's value hover.
onhoverleave	Fires when the element's value hover leave.
oninvalid	Script to be run when an element is invalid.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

OverRidable Classes

• cst-ovr-img-slider
• cst-ovr-img-slider-txt
• cst-ovr-img-slider-sub-txt
• cst-ovr-img-slider-image

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Features

• Display image slider as per given style