Carousel

Using the Feed “Most Wished For in Electronics” with activated option “autoplay” and “infinite”:

On this page, ASA’s managed template “Carousel” is used. It is specialized for displaying multiple products in a carousel style. It works perfectly with ASA 2 collections or smart collections. It is customizable in general and per shortcode.

Main features

  • Specialized for rendering multiple products in a a carousel style
  • Responsive design
  • Adjustable carousel options
  • Customizable without programming skills

Example

This first example is built with the following shortcode:

[asa2_smart_collection cat_slug="coffee-maker" limit="10" tpl="Carousel" /]

Customization

On ASA 2’s admin page “Templates” you can customize the general options of template “Carousel“. These settings will effect every usage of this template.

Shortcode options

Besides the general settings, it is possible to overwrite template options per shortcode.

Example “slidesToShow”

For example, to show 6 slides instead the preset 3 slides, this shortcode using the option “slidesToShow” would make the difference:

[asa2_smart_collection slidesToShow="6" cat_slug="demo-products" tpl="Carousel" /]

Example “autoplay”

Or to activate autoplay, use option “autoplay”:

[asa2_smart_collection autoplay="yes" cat_slug="demo-products" tpl="Carousel" /]

All available options

Following you find a list of all available shortcode options for template “Carousel”:

Layout
OptionTypeValuesDescription
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
OptionTypeValuesDescription
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
OptionTypeValuesDescription
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, d M Y H:i:s
Image
OptionTypeValuesDescription
img_min_height string custom text Image minimum height. CSS value like "100px". Can be used to adjust all items to the same height.
Navigation
OptionTypeValuesDescription
arrows bool "yes" / "no" Next/Prev arrows. Enable Next/Prev navigation arrows.
nav_arrows string
  • "1" (Style 1)
  • "2" (Style 2)
  • "3" (Style 3)
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
OptionTypeValuesDescription
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
OptionTypeValuesDescription
lazyLoad string
  • "ondemand" (on demand)
  • "progressive" (progressive)
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
  • "slick-carousel" (slick carousel)
Carousel behavior. This can not be changed yet.
custom_css string
  • "slick-carousel" (slick carousel)
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.

More examples

Using ASA2’s Keyword Search feature

Learn more about ASA2’s Keyword Search feature.

[asa2_keywords country_code="UK" tpl="Carousel" min_price="3000" delivery_flags="Prime" min_reviews_rating="4" sort_by="NewestArrivals"]DJ Equipment[/asa2_keywords]

Using ASA2’s smart collection feature

Learn more about ASA2’s smart collections feature.

This example uses options “button_color” and “savings_bg_color” to customize the layout.

[asa2_smart_collection is_available_main="true" tpl="Carousel" cat_slug="no-contract-cell-phones" button_color="red" savings_bg_color="red" /]

Using ASA2’s collection feature

Learn more about ASA2’s collections feature.

This example uses options “button_color”, “savings_bg_color” and “button_font_css” to customize the layout.

[asa2_collection tpl="Carousel" button_color="green" savings_bg_color="blue" button_font_css="italic bold 16px/30px Georgia, serif"]lego_star_wars[/asa2_collection]