Carousel Pagination

Reusable carousel navigation registered as <lta-carousel-pagination>. Uses existing class names for Swiper compatibility. Optional color, hover-color, and active-color set shared CSS variables for arrows and dots.

Media carousel — light background (default)

Uses SCSS defaults: LTA Navy for arrows and active dot, LTA Blue Hover on hover, grey mid for inactive dots.

<lta-carousel-pagination
  variant="media-carousel">
</lta-carousel-pagination>

Media carousel — dark background

Default and active use --color-white; hover uses --color-lta-accent-pink.

<lta-carousel-pagination
  variant="media-carousel"
  color="var(--color-white)"
  hover-color="var(--color-lta-accent-pink)"
  active-color="var(--color-white)">
</lta-carousel-pagination>

Media carousel — colour background

Default and active use --color-white; hover uses --color-grey-light.

<lta-carousel-pagination
  variant="media-carousel"
  color="var(--color-white)"
  hover-color="var(--color-grey-light)"
  active-color="var(--color-white)">
</lta-carousel-pagination>

Carousel V2 — light background (default)

variant="carousel-v2" with default pagination colours.

Carousel V2 slide 1

Carousel V2 slide 2

Carousel V2 slide 3

Carousel V2 slide 4

Carousel V2 slide 5

Carousel V2 slide 6

<lta-carousel-pagination
  variant="carousel-v2"
  prev-icon="arrow-left-circle"
  next-icon="arrow-right-circle">
</lta-carousel-pagination>

Carousel V2 — dark background

Same colour attrs as media carousel dark, with variant="carousel-v2".