Testimonial Carousel 02

Configurable Data Attributes

This carousel can be configured using data attributes on the root .al-carousel element. Edit via the Etch Attributes Bar (Cmd+K) or HTML Panel.

Static Examples

<!-- Default: dots and arrows visible -->
data-show-dots="true" data-show-arrows="true"

<!-- Hide dots, show arrows -->
data-show-dots="false" data-show-arrows="true"

<!-- Show dots, hide arrows -->
data-show-dots="true" data-show-arrows="false"

<!-- Hide both (swipe/drag only) -->
data-show-dots="false" data-show-arrows="false"

Etch Props Usage

When using this as a reusable component, bind data attributes to props:

<!-- In component attributes -->
data-show-dots="{prop.showDots}"
data-show-arrows="{prop.showArrows}"

<!-- Props definition -->
showDots: boolean (default: true)
showArrows: boolean (default: true)

Then when placing the component, set props in the Properties panel:

showDots: true
showArrows: false

Notes

• Arrows are always hidden on tablet/mobile (≤1024px) via CSS regardless of the data attribute
• Dots remain visible on mobile when enabled
• Drag/swipe navigation works on all devices
• Keyboard navigation (arrow keys) is supported when the carousel has focus