Technical documentation - Carousel
- Mattias Lƶfstrand
- Thomas Sandstrƶm
This article describes how to configure carousels. Carousels are used in many places for viewing images, cross sales and sales statistics.
Version 5.0.
This functionality is available in version 5.0 and later.
Usage
Carousel tag can be used on a few different places; on presentations, in cross sales, in sales statistics, on part rows, in quick navigation and on order page.
Ā
Sample usage as below.
<Presentation id="start" class="start">
<Trigger label="start"/>
<!-- This setting determines how images are presented on presentations -->
<Image>
<Carousel class="round" outofbounds-slides-visible="true" all-slides-visible="true" indicators-layout="below"/>
</Image>
<OrderStatisticsSettings id="P" displayCount="10" label="latestPncByUser" class="topParts,catalogue-statistics" excludeItems="fixit,accessories,start">
<LatestCataloguesByUser>true</LatestCataloguesByUser>
<!-- This setting determines how order statistics carousel is presented -->
<Carousel class="round" outofbounds-slides-visible="true" all-slides-visible="true" indicators-layout="below"/>
<Presentation template="preview">
<!-- This setting determines how images on presentations within order statistics carousel are presented -->
<Carousel class="round" outofbounds-slides-visible="true" all-slides-visible="true" indicators-layout="below"/>
</Presentation>
</OrderStatisticsSettings>
<CrossSales>
<!-- This setting determines how cross sales carousel is presented -->
<Carousel class="round" outofbounds-slides-visible="true" all-slides-visible="true" indicators-layout="below"/>
<Presentation template="preview">
<!-- This setting determines how images on presentations within cross sales carousel are presented -->
<Carousel class="round" outofbounds-slides-visible="true" all-slides-visible="true" indicators-layout="below"/>
</Presentation>
</CrossSales>
<Presentation>Options
Carousel has a set of options as below.
Tag | Options | Usage |
|---|---|---|
all-slides-visible | bool | If true, the slides is potentially visible at once. The width of each slide is determined by its content. |
auto-slide-time | int | Time in ms before carousel slides to next. 0 means no automatic sliding. Default is 0. |
change-mode | slide swap | How scroll to next item is done, by sliding or swapping. Default is slide. |
class | shape: round square brightness: light dark | Design of controls. Two configuration options exist, shape and brightness. Sample usage is class=āroundā or class=āsquare darkā. |
indicators-layout | horisontal: left right middle vertical: below bottom top above | Combine horisontal and vertical attributes to set position of the indicators. Sample usage is indicators-layout=āmiddle belowā |
indicator-navigation | bool | If true user can click on navigator indicator to move to position. |
mouse-over-zoom | dec | Mouse over zooms content. Value 1 does not zoom, 1.1 zooms 10%. Default value is 1. |
omit-empty | bool | If carousel is empty it will not be shown. Default value is true. |
outofbounds-slides-visible | bool | Carousel will use side areas for presenting its content. |
show-navigators-hover | bool | If true, navigators will only display on hover. |
show-indicators-hover | bool | If true, indicator will only display on hover. |
show-thumbnails | bool | If true, show thumbnails. |
show-nextĀ Ā | bool | If true, show next icon. |
show-next-icon | text | Use a different icon for next. |
show-previous | bool | If true, show previous icon. |
show-previous-icon | text | Use a different icon for previous. |
wrap-navigation | bool | When at the end of the carousel next will position at first item (and the other way around). |