Carousel
draft

A carousel allows users to browse through a series of content items one at a time with navigation controls and optional autoplay. Requires Carousel Item components as children to define individual slides.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdCarousel } from '@fbin-web/neighborhood-core';
<nbhd-carousel slides-per-view="2" space-between="16">
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 1</nbhd-text>
      <nbhd-text tag="p">This is the first slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-1" aria-label="Learn more about Slide 1">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 2</nbhd-text>
      <nbhd-text tag="p">This is the second slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-2" aria-label="Learn more about Slide 2">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 3</nbhd-text>
      <nbhd-text tag="p">This is the third slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-3" aria-label="Learn more about Slide 3">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 4</nbhd-text>
      <nbhd-text tag="p">This is the fourth slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-4" aria-label="Learn more about Slide 4">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 5</nbhd-text>
      <nbhd-text tag="p">This is the fifth slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-5" aria-label="Learn more about Slide 5">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <nbhd-flex surface="secondary">
      <nbhd-text tag="h2" variant="title">Slide 6</nbhd-text>
      <nbhd-text tag="p">This is the sixth slide.</nbhd-text>
      <nbhd-link href="go-to-this-link-6" aria-label="Learn more about Slide 6">Learn More</nbhd-link>
    </nbhd-flex>
  </nbhd-carousel-item>
</nbhd-carousel>

React 

import {
  NbhdCarousel,
  NbhdText,
  NbhdLink,
  NbhdCarouselItem,
  NbhdFlex,
} from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdCarousel
      slidesPerView={2}
      spaceBetween={16}>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 1
          </NbhdText>
          <NbhdText tag="p">This is the first slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-1"
            ariaLabel="Learn more about Slide 1">
            Learn More
          </NbhdLink>
        </NbhdFlex>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 2
          </NbhdText>
          <NbhdText tag="p">This is the second slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-2"
            aria-label="Learn more about Slide 2">
            Learn More
          </NbhdLink>
        </NbhdFlex>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 3
          </NbhdText>
          <NbhdText tag="p">This is the third slide.</NbhdText>
          <nbhd-link
            href="go-to-this-link-3"
            ariaLabel="Learn more about Slide 3">
            Learn More
          </nbhd-link>
        </NbhdFlex>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 4
          </NbhdText>
          <NbhdText tag="p">This is the fourth slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-4"
            ariaLabel="Learn more about Slide 4">
            Learn More
          </NbhdLink>
        </NbhdFlex>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 5
          </NbhdText>
          <NbhdText tag="p">This is the fifth slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-5"
            ariaLabel="Learn more about Slide 5">
            Learn More
          </NbhdLink>
        </NbhdFlex>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <NbhdFlex surface="secondary">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 6
          </NbhdText>
          <NbhdText tag="p">This is the sixth slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-6"
            ariaLabel="Learn more about Slide 6">
            Learn More
          </NbhdLink>
        </NbhdFlex>
      </NbhdCarouselItem>
    </NbhdCarousel>
  </>
);

Properties

Property Attribute Type Default Description
variant variant card | product-card | minitron | jumbotron | humongotron | custom custom Carousel content variant.
slidesPerView slides-per-view number 1 Number of slides shown at once when using slide transition.
spaceBetween space-between number 16 Space between slides in pixels.
hideNavigation hide-navigation boolean false Hide previous/next navigation controls when set to true.
hidePagination hide-pagination boolean false Hide pagination bullets when set to true.
loop loop boolean false Enable continuous loop mode.
fade fade boolean false Use fade transition instead of slide transition.
speed speed 500 | 1000 | 2000 | 3000 1000 Transition duration in milliseconds.
autoplay autoplay 0 | 2000 | 3000 | 4000 | 5000 | 6000 0 Autoplay delay in milliseconds; 0 disables autoplay.
paginationVariant pagination-variant circle | line circle Pagination style variant.
navigationVariant navigation-variant primary | secondary | ghost primary Navigation button style variant.
navigationPosition navigation-position side | bottom side Navigation control placement.
fullwidth fullwidth boolean false Enable full-width carousel presentation.
keyboard keyboard boolean true Enable keyboard navigation for carousel controls.
breakpoints breakpoints string JSON string map of viewport widths to slidesPerView values.
surface surface none | primary | secondary | inverse | inverse-secondary primary Surface theme for the carousel section.
marginTop margin-top none | small | medium | large none Adjust margin above the component.
marginBottom margin-bottom none | small | medium | large none Adjust margin below the component.
paddingTop padding-top default | none | small | medium | large default Adjust padding above the component.
paddingBottom padding-bottom default | none | small | medium | large default Adjust padding below the component.

Events

Name Description Event Detail
nbhd-slide-change Fired when the carousel changes to a new slide. { activeIndex: number, previousIndex: number }

CSS Parts

Name Description
base The component's base section wrapper.
container The container element wrapping all carousel content.
carousel The Swiper container element.
wrapper The slides wrapper container.
navigation The navigation controls container.
navigation-prev The previous slide navigation button.
navigation-next The next slide navigation button.
carousel-navigation-icon The navigation button SVG icons.
pagination The pagination controls container.
autoplay-control The autoplay toggle button.
carousel-controls The container for carousel navigation, pagination, and autoplay controls.

CSS Properties

Property Default Value
--nbhd-carousel-controls-size 40px
--nbhd-carousel-navigation-blockSize auto
--nbhd-carousel-navigation-display block
--nbhd-carousel-navigation-inlineSize 100%
--nbhd-carousel-navigation-insetBlockEnd auto
--nbhd-carousel-navigation-insetBlockStart auto
--nbhd-carousel-navigation-insetInlineStart auto
--nbhd-carousel-navigation-marginBlock 0
--nbhd-carousel-navigation-marginInline 0
--nbhd-carousel-navigation-maxInlineSize none
--nbhd-carousel-navigation-position static
--nbhd-carousel-navigation-transform none
--nbhd-carousel-navigation-button-insetBlockStart 50%
--nbhd-carousel-navigation-button-insetInlineStart auto
--nbhd-carousel-navigation-button-insetInlineEnd auto
--nbhd-carousel-navigation-button-position absolute
--nbhd-carousel-navigation-button-transform translateY(-50%)
--nbhd-carousel-navigation-button-zIndex 1
--nbhd-carousel-navigation-icon-inlineSize 100%
--nbhd-carousel-navigation-icon-maxBlockSize 10px
--nbhd-carousel-navigation-icon-transform none
--nbhd-carousel-navigation-ghost-icon-maxBlockSize 16px
--nbhd-carousel-pagination-blockSize var(--nbhd-carousel-controls-size)
--nbhd-carousel-pagination-alignItems center
--nbhd-carousel-pagination-display flex
--nbhd-carousel-pagination-insetBlockEnd auto
--nbhd-carousel-pagination-insetInlineStart 50%
--nbhd-carousel-pagination-justifyContent center
--nbhd-carousel-pagination-maxInlineSize none
--nbhd-carousel-pagination-position relative
--nbhd-carousel-pagination-textAlign center
--nbhd-carousel-pagination-transform translateX(-50%)
--nbhd-carousel-pagination-zIndex 1
--nbhd-carousel-pagination-item-blockSize 8px
--nbhd-carousel-pagination-item-cursor pointer
--nbhd-carousel-pagination-item-inlineSize 8px
--nbhd-carousel-pagination-item-position relative
--nbhd-carousel-pagination-item-transitionProperty background-color
--nbhd-carousel-pagination-item-transitionTimingFunction ease-in-out
--nbhd-carousel-pagination-item-background-opacity 0.3
--nbhd-carousel-pagination-item-line-blockSize 3px
--nbhd-carousel-pagination-item-line-inlineSize 50px
--nbhd-carousel-pagination-item-hover-background-opacity 0.75
--nbhd-carousel-pagination-item-active-background-opacity 1
--nbhd-carousel-pagination-item-marginInline 2px
--nbhd-carousel-pagination-item-paddingBlock 0
--nbhd-carousel-pagination-item-paddingInline 0
--nbhd-carousel-pagination-item-transitionDuration 200ms
--nbhd-carousel-pagination-item-border 0
--nbhd-carousel-pagination-item-borderRadius 9999px
--nbhd-carousel-pagination-item-line-borderRadius 0

Dependencies

This component contains the following components as dependencies.