Carousel¶
The managed template “Carousel” is specialized for displaying multiple products in a carousel style. It works perfectly with ASA 2 Collections or smart collections ([asa2_smart_collection]). It is customizable in general and per shortcode.
Main features¶
Specialized for rendering multiple products in a carousel style
Responsive design
Adjustable carousel options
Customizable without programming skills
Demo page¶
To see this template in action with different examples, please refer to the demo page:
Example¶
Example shortcode:
This example shortcode shows 10 items of category “Coffee maker” filtered by availability in carousel layout.
[asa2_smart_collection cat_slug="coffee-maker" limit="10" tpl="Carousel" is_available_main="true" /]
Global Options¶
On ASA 2’s admin page “Templates” you can open a customization context window for each managed template. Just hover the mouse cursor over a template row and click the link “Customize” to open it. These settings will effect the appearance of this template.
Note
The globally applied options can be dynamically overwritten via shortcode options.
The following screenshot illustrates the options window by means of the “Book” template:
Shortcode Options¶
In addition to the global options mentioned above, it is also possible to overwrite these settings dynamically in a WordPress shortcode, like this:
// general syntax:
[asa2 option="value"]ASIN[/asa2]
Take a look at other examples.
Complete Options List¶
Complete list of all options available for the template “Carousel”:
| Layout | |||
|---|---|---|---|
| Option | Type | Values | Description |
| adaptiveHeight | bool | "yes" / "no" | Adaptive height. Adapts slider height to the current slide. |
| centerMode | bool | "yes" / "no" | Center mode. Enables centered view with partial prev/next slides. Use with odd numbered slides counts. |
| centerPadding | string | custom text | Center padding. Slide padding when in center mode (px or %). |
| cssEase | string | custom text | CSS3 easing. Utilizes the CSS transition property. |
| variableWidth | bool | "yes" / "no" | Variable width. Disables automatic slide width calculation. |
| rtl | bool | "yes" / "no" | RTL. Change the slider's direction to become right-to-left. |
| Slides | |||
| Option | Type | Values | Description |
| slidesToShow | int | 1 between 99 | Number of slides to show at a time |
| slidesToScroll | int | 1 between 99 | Number of slides to scroll at a time |
| initialSlide | int | 0 between 999 | Initial slide. The slide to start on. |
| speed | int | 100 between 9999 | Slide transition speed. In milliseconds. |
| Price | |||
| Option | Type | Values | Description |
| show_price_disclaimer | bool | "yes" / "no" | Show price disclaimer. "Details" link next to date of last update. |
| last_update_format | string | custom text | Last item update date format. Used in price disclaimer. Supports PHP date function format. Example: d.m.Y H:i:s |
| Image | |||
| Option | Type | Values | Description |
| img_min_height | string | custom text | Image minimum height. CSS value like "100px". Can be used to adjust all items to the same height. |
| Title | |||
| Option | Type | Values | Description |
| title_length | int | 0 between 999 | Title max length. Limits the title to a maximum length of characters. 0 for unlimited. |
| Navigation | |||
| Option | Type | Values | Description |
| arrows | bool | "yes" / "no" | Next/Prev arrows. Enable Next/Prev navigation arrows. |
| nav_arrows | string |
|
Navigation arrows style |
| dots | bool | "yes" / "no" | Dots. Show the current slide indicator dots. |
| infinite | bool | "yes" / "no" | Infinite looping |
| pauseOnFocus | bool | "yes" / "no" | Pause on focus. Pauses autoplay when slider is focussed. |
| pauseOnHover | bool | "yes" / "no" | Pause on hover. Pauses autoplay on hover. |
| pauseOnDotsHover | bool | "yes" / "no" | Pause on dots hover. Pauses autoplay when a dot is hovered. |
| autoplay | bool | "yes" / "no" | Autoplay. Enables auto play of slides. |
| autoplaySpeed | int | 100 between 99999 | Auto play change interval. In milliseconds. |
| Accessibility | |||
| Option | Type | Values | Description |
| accessibility | bool | "yes" / "no" | Accessibility. Enables tabbing and arrow key navigation. |
| swipe | bool | "yes" / "no" | Swipe. Enables touch swipe. |
| touchMove | bool | "yes" / "no" | Touch move. Enables slide moving with touch. |
| Misc | |||
| Option | Type | Values | Description |
| lazyLoad | string |
|
Lazy load. Accepts "ondemand" or "progressive" for lazy load technique. "ondemand" will load the image as soon as you slide to it, "progressive" loads one image after the other when the page loads. |
| carousel_behavior | string |
|
Carousel behavior. This can not be changed yet. |
| custom_css | string |
|
Custom CSS. Custom CSS that is applied to all occurrences of this template on a page and is only included once in the source code. |
Shortcode Options Examples¶
// to activate autoplay:
[asa2_smart_collection autoplay="yes" cat_slug="demo-products" tpl="Carousel" /]
// to show 6 slides instead the preset 3 slides
[asa2_smart_collection slidesToShow="6" cat_slug="demo-products" tpl="Carousel" /]