Image & content slider
Properties
| Property name | Type | Description |
| appendToID | String |
The id of the target container (<div> tag or other HTML element) where the content slider will be added. This parameter must be set before using the slider, otherwise the component will not be added to the DOM.
Important! This is the most important parameter of the slider and without it the slider will not work. If the parameter is not set an error message will be displayed in the browser's console (developer tools). |
| animationType | String |
Sets the type of the animation that is applied as show and hide effects for the slides. Possible values: “fade”, “slide”, “none”.
The default value is “slide”. |
| animationDuration | Number |
The duration of the show/hide effect for one slide expressed in seconds.
The default value is 0.3. |
| maxWidth | Number |
The maximum width of the slider (in pixels) which is used to calculate the size ratio of the component. Using this ratio the slider is then resized by the grid, when the grid is resized..
Note! The width of the slider is always set by the width of the parent container but will not exceed the maxWidth value. The default value is 800. |
| maxHeight | Number |
The maximum height of the slider (in pixels) which is used to calculate the size ratio of the component. Using this ratio the slider is then resized by the grid, when the grid is resized.
Note! The height of the slider is calculated based on the width of the slider and its default ratio and will not exceed the maxHeight value. The default value is 450. |
| autoSlideshow | Number |
If it is set to true, the slider will automatically navigate through the slides. Each slide is displayed for an amount of time specified by the slideshowSpeed property, then the slider will automatically advance to the next slide. If loopContent is set to true, after the last slide is displayed, the component will restart the slideshow from the first slide, otherwise it will stop at the last slide.
The default value is true. |
| slideshowSpeed | Number |
The amount of time (in seconds) until a slide is displayed during the slideshow - from the end of the previous transition to the start of the next one.
The default value is 6. |
| showControlBar | Boolean |
If it is set to true, the slider displays the control bar.
The default value is true. |
| showNavButtons | Boolean |
If set to true, the slider displays the Previous and Next slide buttons.
The default value is true. |
| showTimer | Boolean | If it is true, the timer will be displayed in the top-right corner of the slider. |
| loopContent | Boolean |
If set to true, the slider will display the slides in a loop - from the last slide it will allow navigating to the next slide, in fact the first slide; from the first slide it will allow navigating to the previous slide, in fact the last slide.
Note! If the slider is set to auto slideshow (autoSlideshow set to true) and the loopContent property is set to true, the slideshow will advance automatically from the last slide to the first one and restart the slideshow. If autoSlideshow is set to true but loopContent is false, the slideshow will play automatically from the first slide and stop at the last slide. The default value is false. |
| imageScaleMode | String |
The scaling mode is used only for images from an image slideshow (slide type is set to image). Possible values: scale, scaleCrop, crop and stretch.
The default value is scaleCrop. Note! Images are always vertically and horizontally centered. |
| autoHideControls | Boolean |
If it is true, the controls (navigation buttons, control bar and captions) will hide automatically after a period of inactivity specified by autoHideDelay or when the mouse rolls out of the slider. In case of mobile devices, the controls will display when the user taps on the slider surface.
The default value is false. |
| autoHideDelay | Number |
If autoHideControls is set to true, the controls will hide after a period of inactivity. That period of inactivity is set by this property and it is measured in seconds.
The default value is 3. |
| pauseOnMouseOver | Boolean |
If set to true, the automatic slideshow will stop while the mouse is over the slider.
The default value is false. Note! This parameter is used only when the slideshow is running. |
| disableAutohideOnMouseOver | Boolean |
If set to true, the controls (navigation buttons, control bar and captions) will not hide automatically while the mouse is over the slider, even if autoHideControls is set to true.
The default value is false. |
| captionAlignment | String |
Sets the alignment of the title and description within the caption area (control bar). Possible values: left, center, right.
The default value is left. |
| captionColor | String |
The color of the title and description.
The default value is #FFFFFF. |
| startIndex | Number |
The index of the slide, which is displayed firstly. If this property is not set, the slider starts with the first slide.
The default value is 0. |