Skip to main content

Carousel

shadow

A Carousel is an element that displays multiple items, such as images or news updates, in a rotating fashion.

Basic usage​

Paginaton​

No loop​

Dialogue​

Thumbnail image​

Offset​

Distribution​

When to use​

Use wje-carousel to improve readability, scannability, and contextual understanding of content.

When not to use​

Do not replace structured interactive data with media-only presentation when precision is needed.

Accessibility​

Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.

Best Practices​

  • Compress media and use lazy loading in larger collections.
  • Keep information priority consistent across cards/lists.
  • Avoid duplicating the same meaning in icon and text without added value.

Attributes and Properties​

activeSlide​

DescriptionActive slide attribute.
Attributeactive-slide
Typenumber｜number
Default-

Events​

No events available for this component.

Methods​

syncActiveToCenter​

DescriptionSync activeSlide to the slide whose center is closest to the container center.
Signature() => void

setIntersectionObserver​

DescriptionSets up the IntersectionObserver for the Carousel.
Signature() => void

goToSlide​

DescriptionGoes to the slide.
Signature(index: any, behavior: any, next: any) => void

cloneFirstAndLastItems​

DescriptionClones the first and last items.
Signature() => void

removeActiveSlide​

DescriptionGoes to the next slide.
Signature() => void

changePagination​

DescriptionGoes to the next slide.
Signature() => void

changeThumbnails​

DescriptionGoes to the next slide.
Signature() => void

createNextButton​

DescriptionGoes to the next slide.
Signature() => Element

createPreviousButton​

DescriptionGoes to the next slide.
Signature() => Element

createPagination​

DescriptionGoes to the next slide.
Signature() => Element

createThumbnails​

DescriptionGoes to the next slide.
Signature() => Element

nextSlide​

DescriptionGoes to the next slide.
Signature() => void

previousSlide​

DescriptionGoes to the previous slide.
Signature() => void

getSlides​

DescriptionGoes to the slide.
Signature() => Array

getSlidesWithClones​

DescriptionGoes to the slide.
Signature() => Array

getVisualIndexForLogical​

DescriptionMaps logical index -> visual index (accounts for leading clone when loop=true).
Signature(index: any) => void

getLogicalIndexForVisual​

DescriptionMaps visual index -> logical index (handles clones at 0 and last when loop=true).
Signature(vIndex: any) => void

canGoNext​

DescriptionGoes to the slide.
Signature() => boolean

canGoPrevious​

DescriptionGoes to the slide.
Signature() => boolean

CSS Shadow Parts​

No CSS shadow parts available for this component.

Slots​

NameDescription
defaultDefault slot for the main component content.

Content