Carousel Directive

Integrates Swiper.js into ACoreX applications to create highly customizable and responsive carousels/sliders.

Overview

The axCarousel directive provides a simple way to create powerful carousels using Swiper.js. It handles the initialization and configuration of the Swiper instance, automatically applying necessary CSS classes to your HTML structure.

Usage

Apply the axCarousel directive to the container element of your carousel. The directive expects a specific HTML structure, and it will add the required Swiper.js classes.

Basic Example (HTML)

Demo

API

Options

The axCarousel directive accepts any valid Swiper.js options via the carouselOptions input. See the Swiper API documentation for a complete list of available options.

Swiper Modules

The directive dynamically imports and includes *all* Swiper modules (A11y, Autoplay, Navigation, Pagination, etc.). This makes all Swiper features available without needing to manually import them. Be mindful of bundle size if you only use a subset of modules. Future versions might allow for more granular module selection.

Notes and Best Practices

Ensure that your HTML structure matches the expected structure shown in the usage examples. The directive adds classes, but it does *not* create the elements.
Dynamically importing Swiper modules means that the carousel will only be initialized *after* the necessary modules have been loaded.
If you provide an empty object to carouselOptions, the directive will effectively skip initialization. This could be used for conditional rendering, but be aware of the timing implications.
The `effect` in the directive ensures Swiper re-initializes if `carouselOptions` changes.