[ Installation ]

npx wally-ui add carousel

[ Preview ]

Slide 1

Slide 2

Slide 3

[ Import ]

import { Carousel } from './components/wally-ui/carousel/carousel';

@Component({
  selector: 'app-example',
  imports: [Carousel],
  templateUrl: './example.html',
  styleUrl: './example.css'
})

[ Basic Usage ]

Simple carousel setup - just wrap your content elements. No configuration required.

Simple Carousel

<wally-carousel>
  <div>Item 1</div>
  <div>Item 2</div>
</wally-carousel>

Item 1

Item 2

<wally-carousel [isNavigationIndicator]="true">
  <div>Item 1</div>
  <div>Item 2</div>
</wally-carousel>

Item 1

Item 2

[ Advanced Examples ]

Custom Content

<wally-carousel>
  <div class="w-full h-full bg-gradient-to-r from-blue-500 to-purple-600 text-white flex flex-col items-center justify-center p-6">
    <h3 class="text-xl font-bold mb-2">Feature 1</h3>
    <p class="text-center text-sm">Custom slide with rich content</p>
  </div>
  <div class="w-full h-full bg-gradient-to-r from-green-500 to-blue-500 text-white flex flex-col items-center justify-center p-6">
    <h3 class="text-xl font-bold mb-2">Feature 2</h3>
    <p class="text-center text-sm">Another slide with different styling</p>
  </div>
</wally-carousel>

Feature 1

This is a custom slide with rich content

Feature 2

Another slide with different styling

Feature 3

Beautiful gradients and typography

[ Responsive Design ]

The carousel is 100% responsive and adapts to any container size. Simply set the parent container dimensions and the carousel will fill it completely.

<!-- Different sizes for different use cases -->

<!-- Hero carousel - full width, tall -->
<div class="w-full h-96">
  <wally-carousel>
    <div>Hero slide 1</div>
    <div>Hero slide 2</div>
  </wally-carousel>
</div>

<!-- Product gallery - square aspect ratio -->
<div class="w-full aspect-square max-w-md">
  <wally-carousel>
    <div>Product image 1</div>
    <div>Product image 2</div>
  </wally-carousel>
</div>

<!-- Mobile testimonials - compact -->
<div class="w-full h-48 sm:h-64">
  <wally-carousel>
    <div>Testimonial 1</div>
    <div>Testimonial 2</div>
  </wally-carousel>
</div>

Hero Carousel (w-full h-96)

Hero Slide 1

Perfect for landing page heroes

Hero Slide 2

Responsive and touch-friendly

Compact Carousel (w-full h-48)

Compact Design

Great for testimonials

Mobile Friendly

Swipe gestures included

[ Accessibility ]

The carousel is built with comprehensive accessibility features and follows WCAG guidelines for inclusive design.

ARIA Attributes

role="region"

Identifies the carousel as a landmark region

aria-label="Carousel"

Provides accessible name for screen readers

tabindex="0"

Makes carousel keyboard focusable

aria-label="Navigate to slide X"

Descriptive labels for navigation indicators

Keyboard Navigation Example

Click the carousel below to focus it, then use keyboard arrows to navigate:

Keyboard Accessible

Use ← → arrows when focused

Screen Reader Friendly

Proper ARIA attributes included

WCAG Compliant

WCAG accessibility standards

[ Properties ]

The carousel component accepts one optional input property and automatically manages its internal state.

Input Properties

isNavigationIndicator: InputSignal<boolean> = input<boolean>(false);

Controls whether navigation indicators (dots) are displayed below the carousel.

Read-only Properties

totalItemsCount: number (read-only);

Automatically detected number of child elements in the carousel

currentVisibleItemIndex: number (read-only);

Zero-based index of the currently visible slide

navigationIndicatorsArray: any[] (read-only);

Auto-generated array used for rendering navigation indicators

[ API Methods ]

Public methods available for programmatic control of the carousel. Access these methods through a template reference or ViewChild.

Method	Parameters	Return	Description
Navigation Methods
`navigateToNextItem()`	None	void	Navigate to the next slide with circular navigation
`navigateToPreviousItem()`	None	void	Navigate to the previous slide with circular navigation
`navigateToSpecificItem()`	`index: number`	void	Jump directly to a specific slide by index (0-based)
Calculation Methods
`calculateNextItemIndex()`	`current: number`	number	Calculate the next index using circular buffer algorithm
`calculatePreviousItemIndex()`	`current: number`	number	Calculate the previous index using circular buffer algorithm
Positioning Methods
`updateItemElementPosition()`	`element: HTMLElement index: number`	void	Update position of a specific carousel item element
`updateAllItemElementPositions()`	None	void	Update positions of all carousel item elements

[ Keyboard Navigation ]

When the carousel has focus, users can navigate using these keyboard shortcuts.

// Keyboard navigation (when carousel is focused)
ArrowLeft  → Previous slide
ArrowRight → Next slide
Home       → First slide
End        → Last slide

[ Touch & Mouse Gestures ]

Interactive gestures supported on both mobile and desktop devices.

// Touch and mouse gestures
Swipe Left  → Next slide
Swipe Right → Previous slide
Click Dots  → Jump to specific slide
Drag        → Same as swipe (desktop)