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:

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:

Example “autoplay”

Or to activate autoplay, use option “autoplay”:

All available options

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

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
img_min_height int 0 between 999 Image minimum height. Can be used to adjust all items to the same height.
initialSlide int 0 between 999 Initial slide. The slide to start on
accessibility bool "yes" / "no" Accessibility. Enables tabbing and arrow key navigation
adaptiveHeight bool "yes" / "no" Adaptive height. Adapts slider height to the current slide
arrows bool "yes" / "no" Enable Next/Prev navigation arrows
nav_arrows string
  • "1" (Style 1)
  • "2" (Style 2)
  • "3" (Style 3)
Navigation arrows style
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 %). Default: 50px
cssEase string custom text CSS3 easing. Utilizes the CSS transition property
dots bool "yes" / "no" Dots. Show the current slide indicator dots
infinite bool "yes" / "no" Infinite looping
speed int 100 between 9999 Slide transition speed (in milliseconds)
autoplay bool "yes" / "no" Autoplay. Enables auto play of slides
autoplaySpeed int 100 between 99999 Auto play change interval (in milliseconds)
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
swipe bool "yes" / "no" Swipe. Enables touch swipe
touchMove bool "yes" / "no" Touch move. Enables slide moving with touch
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
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 (can not be changed yet)

More examples

Using ASA2’s RSS Feed feature

Learn more about ASA2’s RSS feed feature.


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.


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.