Carousel

1

2

3

4

5

6

7

HTML

HTML

<fulcrum-element-carousel wrap-around page-dots page-nav cloak>
  <div class="demo-slide">
    <div class="demo-card">1</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">2</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">3</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">4</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">5</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">6</div>
  </div>
  <div class="demo-slide">
    <div class="demo-card">7</div>
  </div>
</fulcrum-element-carousel>

CSS

CSS

fulcrum-element-carousel[cloak] {
  display: none;
}

fulcrum-element-carousel {
  max-width: 48rem;
  margin: auto;
  --slide-height: 19rem;
  --slide-spacing: 6px;
  --slide-size: 70%;
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-400\/50: oklch(84.21% 0.22607 129.858 / 0.5);
  --radius-lg: 0.5rem;
}
.demo-slide {
  flex: 0 0 40%;
  height: var(--slide-height);
  padding: var(--slide-spacing);
  margin: 0;
}

.demo-slide-full {
  flex: 0 0 100%;
  height: var(--slide-height);
  padding: var(--slide-spacing);
}

.demo-card {
  height: 100%;
  background-color: var(--color-lime-100);
  border-radius: var(--radius-lg);
  font-size: 4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Selected card */
.demo-slide.is-snapped .demo-card {
  outline: solid 4px var(--color-lime-400\/50);
}

Implementation Details

The carousel is implemented using the <fulcrum-element-carousel> component. This component is a web component that encapsulates the functionality of the carousel, including navigation and pagination.

Setup

HTML

To use the carousel component, include the following HTML in your page:

<fulcrum-element-carousel wrap-around page-dots page-nav cloak>
  <div class="slide">
    <div class="demo-card">1</div>
  </div>
  <div class="slide">
    <div class="demo-card">2</div>
  </div>
  <div class="slide">
    <div class="demo-card">3</div>
  </div>
</fulcrum-element-carousel>

As demonstrated above, each slide is represented by a <div> with the class demo-slide, and the content of each slide is contained within a child <div> with the class demo-card. Everything inside the fulcrum-element-carousel tag is considered a slide and is completely your responsibility to style. For best results, we recommend including a child element inside each slide container to hold your content and leave the container itself for layout and spacing purposes only. Further, you may include a cloak attribute on the carousel element to prevent a flash of unstyled content before the carousel is fully initialized. This attribute is removed automatically by the component once it is ready. As shown in the CSS example below, you can use the [cloak] attribute selector to hide the carousel until it is ready.

CSS

fulcrum-element-carousel[cloak] {
  display: none;
  --slide-width: 300px;
  --slide-height: 400px;
  --slide-spacing: 6px;
}

/* Slide layout container */
.slide {
  flex: 0 0 var(--slide-width); /* This is how to set the width */
  height: var(--slide-height);
  padding: var(--slide-spacing);
  margin: 0;
}

/* Slide content */
.demo-card {
  height: 100%;
  background-color: #ffffff;
  border-radius: 6px;
  font-size: 1rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
}

Options

The carousel component supports the following options:

• wrap-around: Enables infinite looping of slides.
• page-dots: Displays pagination dots below the carousel.
• page-nav: Displays previous and next navigation arrows.

Events

Init

The carousel component emits an init event when it has been initialized and is ready for interaction. You can listen for this event to perform any setup actions needed after the carousel is ready.

const carousel = document.querySelector("fulcrum-element-carousel");
carousel.addEventListener("init", () => {
  console.log("Carousel initialized and ready");
});

Select

The carousel component emits a select event whenever the selected slide changes. You can listen for this event to perform actions based on the current slide index.

const carousel = document.querySelector("fulcrum-element-carousel");
carousel.addEventListener("select", (event) => {
  console.log("Selected slide index:", event.detail.selectedIndex);
});

Accessibility

The carousel component is built with accessibility in mind. It includes appropriate ARIA roles and properties to ensure that it is usable by all users, including those using assistive technologies.

• Keyboard Navigation: Users can navigate through the slides using keyboard arrows.
• ARIA Roles: The component uses ARIA roles to define the structure and behavior of the carousel.

Dependencies

The carousel component is built using the Embla Carousel library, which provides a lightweight and flexible foundation for creating carousels.