Carousel

A carousel that is unopinionated about the contents of each slide. Compose slides with certara-carousel-item and put any markup inside them.

Code

Framework

HTML

React

Angular

Default

Slide 1Slide 2Slide 3Slide 4

Toggle dark mode

<certara-carousel label="Default carousel example">
  <certara-carousel-item class="bg-brand-100">Slide 1</certara-carousel-item>
  <certara-carousel-item class="bg-brand-200">Slide 2</certara-carousel-item>
  <certara-carousel-item class="bg-brand-300">Slide 3</certara-carousel-item>
  <certara-carousel-item class="bg-brand-400">Slide 4</certara-carousel-item>
</certara-carousel>

import { CertaraCarousel, CertaraCarouselItem } from '@certara/certara-ui-react';

<CertaraCarousel label="Default carousel example">
  <CertaraCarouselItem className="bg-brand-100">Slide 1</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-200">Slide 2</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-300">Slide 3</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-400">Slide 4</CertaraCarouselItem>
</CertaraCarousel>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-carousel label="Default carousel example">
  <certara-carousel-item class="bg-brand-100">Slide 1</certara-carousel-item>
  <certara-carousel-item class="bg-brand-200">Slide 2</certara-carousel-item>
  <certara-carousel-item class="bg-brand-300">Slide 3</certara-carousel-item>
  <certara-carousel-item class="bg-brand-400">Slide 4</certara-carousel-item>
</certara-carousel>

Auto-rotation

Slides automatically cycle every 3 seconds unless interacted with

Slide 1Slide 2Slide 3Slide 4

Toggle dark mode

<certara-carousel label="Auto-rotation carousel example" interval="3000">
  <certara-carousel-item class="bg-brand-100">Slide 1</certara-carousel-item>
  <certara-carousel-item class="bg-brand-200">Slide 2</certara-carousel-item>
  <certara-carousel-item class="bg-brand-300">Slide 3</certara-carousel-item>
  <certara-carousel-item class="bg-brand-400">Slide 4</certara-carousel-item>
</certara-carousel>

import { CertaraCarousel, CertaraCarouselItem } from '@certara/certara-ui-react';

<CertaraCarousel label="Auto-rotation carousel example" interval={3000}>
  <CertaraCarouselItem className="bg-brand-100">Slide 1</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-200">Slide 2</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-300">Slide 3</CertaraCarouselItem>
  <CertaraCarouselItem className="bg-brand-400">Slide 4</CertaraCarouselItem>
</CertaraCarousel>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-carousel label="Auto-rotation carousel example" interval="3000">
  <certara-carousel-item class="bg-brand-100">Slide 1</certara-carousel-item>
  <certara-carousel-item class="bg-brand-200">Slide 2</certara-carousel-item>
  <certara-carousel-item class="bg-brand-300">Slide 3</certara-carousel-item>
  <certara-carousel-item class="bg-brand-400">Slide 4</certara-carousel-item>
</certara-carousel>

certara-carousel

Properties

interval

Attribute	interval
Type	number
Default	0
Required	false
Description	Milliseconds between automatic advances. Leave unset (or 0) to disable auto-rotation. Auto-rotation pauses while the carousel is hovered or focused, and never starts when the user prefers reduced motion.

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	Accessible name for the carousel. Also names the slide marker list.

Events

Name	Description	Bubbles
certaraCarouselChange	Fired when a different slide becomes the current one.	true

Methods

Name	Signature	Description
goTo	(index: number) => Promise<boolean>	Show a specific slide. Slides before the current one animate backwards and slides after it animate forwards.
next	() => Promise<boolean>	Show the following slide, wrapping to the first slide from the last.
prev	() => Promise<boolean>	Show the preceding slide, wrapping to the last slide from the first.

Slots

Name	Description
	certara-carousel-item elements

certara-carousel-Item

A single slide within a certara-carousel. The component is unopinionated about its contents: compose whatever markup the slide needs inside the default slot.

The parent certara-carousel reads label and itemId to build the slide markers, and owns the slide id, ARIA attributes and state classes on this element.

Properties

itemId

Attribute	item-id
Type	string
Default	undefined
Required	false
Description	Stable id used as the marker’s link target. Generated by the parent carousel when omitted.

label

Attribute	label
Type	string
Default	undefined
Required	false
Description	Accessible name for the slide and for the marker that navigates to it. When omitted theparent carousel falls back to the slide’s position, e.g. “Slide 2 of 6”.

Events

There are no events available for this component

Methods

There are no public methods available for this component

Slots

Name	Description
	Slide content