Overview
Features that have image slideshow/carousel contain Carousel Options in the controlling widget. Some widgets that have Carousel Options include:
Example
Settings
- Click Edit to set carousel options.
- In Name, select the carousel setting.
- Enter or select the Value. (See: Setting Names & Values)
- Click Add.
- When finished with all settings, click Apply.
Settings Names & Values
Includes all Carousel options provided for plugin video, lazyload, autoheight and animate.
* Commonly set by Commerce Vision customer websites. To use the default for a setting, there is no need to manually add it.
| Name | Values |
|---|---|
| Items* | Number of items (images, products, articles, etc) displayed on the screen at a time. Default: 3 |
| Margin | Right margin (px) for each item. Default: 0 |
| Loop* | Move items in infinite loop? Toggle ON or OFF. Default: OFF |
| Center* | Centre the starting/current item and show partial previous/next item? Works well with odd item number. Default: OFF |
| MouseDrag | Allow dragging with mouse? Default: ON |
| TouchDrag | Allow dragging on touchscreens? Default: ON |
| StagePadding | Add padding in pixels to the stage, making off-stage next/previous item visible ? Default: 0 |
| AutoWidth | Allow variable width for items in the carousel? Default: OFF |
| StartPosition | Item number to start on when page loads. Default: 0 |
| Nav* | Show Next/Previous buttons? Default: OFF |
| Rewind | Slide backwards to previous item direction when last item reached instead of looping to the first slide? Default: ON |
| NavText* | The text for Next/Previous buttons when Nav is ON. Default: 'next','previous' TIP - use HTML to style it to suit your site. |
| NavElement | HTML Default: div |
| SlideBy | Set how slides to move to next. Next one (default of 1) or by two, three, etc? Default: 1 |
| Dots* | Show dots at bottom of banner to indicate navigation? Default: ON |
| DotsEach | (Dots must be ON.) Enter 'True' for a dot to indicate one page in the sequence, or a number for the number of pages a dot represents. Default: False |
| Autoplay* | Set the carousel to move to the next slide automatically. Default: OFF |
| AutoPlay Timeout* | (Autoplay must be ON.) Interval time before carousel starts and between slides, in milliseconds (1 second = 1000 milliseconds). Default: 5000 (= 5 seconds) |
| AutoHoverPause* | Pause when mouse hovers over banner? Default: OFF |
| SmartSpeed | The time it takes for all slide animations to complete. Default: 250 |
| AutoPlaySpeed | (AutoPlay must be ON.) The time (in milliseconds) for AutoPlay slide animation to complete. Default: false |
| NavSpeed | (Nav must be ON.) The time (in milliseconds) for the Next/Previous navigation slide to complete. Default: false |
| DotSpeed | (Dots must be ON.) The time (in milliseconds) for the dot navigation slide animation to complete Default: Number/Boolean |
| DragEndSpeed | The time (in milliseconds) for the animation to complete once you stop dragging the slider left or right. Default: false |
| Callbacks | (Needs Commerce Vision consultation) Listens for specific events and allows advanced/custom JS manipulation of the Carousel. Default: ON |
| Responsive | Object containing responsive options for browser width breakpoints.
Set to 'false' to remove responsive capabilities, e.g., if your layout is non-flexible. Default: empty object |
| Responsive RefreshRate | (Responsive must not be 'false'.) The time to wait after you changed the browser width to perform refresh actions (calculating widths/ cloning items etc.) Default: 200 |
| Video | Allow a video to be embedded to play in the banner Default: OFF |
| VideoHeight | (Video must be ON.) Set embedded video height. Default: OFF |
| VideoWidth | (Video must be ON.) Set embedded video width. Default: OFF |
| AnimateOut | Animation effect type when item leaves user's view. Select value from dropdown list. |
| AnimateIn | Animation effect type when item enters user's view. Select value from dropdown list. |
| ItemElement | The HTML container type for each individual item. Default: div |
| StageElement | The HTML container type for the entire area with the carousel. Default: div |
| NavContainer | Have Nav in custom HTML container? Default: false |
| DotsContainer | Creat a custom container for Dots using HTML, class, ID Default: OFF |
| LazyLoad | Load items only they are viewable on screen. For better page load speed. Default: ON |
| LazyLoadEager | Preload images to the right (and left when Loop is enabled) based on how many items specified. Default: 0 |
Related help
