Carousel
Table of Contents
Welcome to the demonstration of ASA2’s Carousel template. This specialized template is designed to display multiple products in a dynamic carousel format, making it ideal for showcasing collections or featured items.
It offers extensive customization options, allowing you to adjust settings both globally and per shortcode without any programming skills. The template is fully responsive, ensuring optimal viewing across various devices and screen sizes.
Features include autoplay, infinite loop, and other settings that provide a seamless and engaging user experience. Explore the capabilities of the Carousel template to enhance your product displays.
Integration
There are several ways how an ASA2 product template can be integrated into a website.
This video shows how to use ASA2's Gutenberg Block to embed a products into your website using the "Carousel" template.
This video shows how to use ASA2's Classic Editor Button to embed products into your website using the "Carousel" template.
Wherever you can work with WordPress shortcodes, you can also embed products with ASA2 shortcodes. The template to be used can be defined with the tpl option. Otherwise, the template defined as the default is used.
This shortcode uses the cat_slug option to display products from a specific category and the limit option to limit the quantity to 8.
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="8" orderby="random" tpl="Carousel" /]If you want to render this product template directly from PHP, e.g. in an individual page template, you can do this with the function asa2_render_smart_collection.
<?php
$options = array(
'cat_slug' => 'filter-coffee-machines',
'limit' => 8,
'is_available_main' => true,
'is_prime' => true,
'rating_gt' => 4,
'orderby' => 'rand',
'tpl' => 'Carousel'
);
// display the smart collection
echo asa2_render_smart_collection($options);
Customization
On ASA2’s admin page Templates you can customize the general options of template Carousel. These settings will effect the display of this template on a global scope.
Customization Examples
Infinite Autoplay
This example uses option autoplay and infinite to customize the navigation arrows style.
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="6" tpl="Carousel" infinite="yes" autoplay="yes" is_available_main="true" /]
Button Layout
This example uses option button_color and savings_bg_color to customize the button layout.
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="6" tpl="Carousel" button_color="red" savings_bg_color="red" is_available_main="true" /]Nav Arrow Style
This example uses option nav_arrows to customize the navigation arrows style.
[asa2_smart_collection cat_slug="filter-coffee-machines" limit="6" tpl="Carousel" nav_arrows="3" is_available_main="true" /]Options
This list contains all the options that are available for ASA2's product template Carousel, including examples of how they can be used in conjunction with shortcode.
| 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. |