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.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdCarousel } from '@fbin-web/neighborhood-core';
<nbhd-carousel slides-per-view="2">
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
  <nbhd-carousel-item>
    <div style="background: #f1f1f1; width:100%; padding: 20px;">
      <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>
    </div>
  </nbhd-carousel-item>
</nbhd-carousel>

React 

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

const App = () => (
  <>
    <NbhdCarousel slidesPerView={2}>
      <NbhdCarouselItem>
        <div className="slide">
          <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>
        </div>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <div className="slide">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 2
          </NbhdText>
          <NbhdText tag="p">This is the second slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-2"
            ariaLabel="Learn more about Slide 2">
            Learn More
          </NbhdLink>
        </div>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <div className="slide">
          <NbhdText
            tag="h2"
            variant="title">
            Slide 3
          </NbhdText>
          <NbhdText tag="p">This is the third slide.</NbhdText>
          <NbhdLink
            href="go-to-this-link-3"
            ariaLabel="Learn more about Slide 3">
            Learn More
          </NbhdLink>
        </div>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <div className="slide">
          <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>
        </div>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <div className="slide">
          <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>
        </div>
      </NbhdCarouselItem>
      <NbhdCarouselItem>
        <div className="slide">
          <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>
        </div>
      </NbhdCarouselItem>
    </NbhdCarousel>
  </>
);

Properties

Property Attribute Type Default Description
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.
navVariant nav-variant solid | outlined | ghost solid Navigation button style variant.
navPosition nav-position sides | bottom sides 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.
background background none | primary-light | secondary-light | primary-dark | secondary-dark none Background 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 slides 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.
nav The navigation controls container.
button-prev The previous slide navigation button.
button-next The next slide navigation button.
carousel-nav-icon The navigation button SVG icons.
pagination The pagination controls container.
autoplay-control The autoplay toggle button.

CSS Properties

Property Default Value
--nbhd-carousel-pagination-blockSize 37px
--nbhd-carousel-pagination-display flex
--nbhd-carousel-pagination-alignItems center
--nbhd-carousel-pagination-justifyContent center
--nbhd-carousel-paginationItem-blockSize 8px
--nbhd-carousel-paginationItem-inlineSize 8px
--nbhd-carousel-paginationItem-borderRadius 50%
--nbhd-carousel-paginationItem-marginInline 2px
--nbhd-carousel-paginationItem-transitionDuration 0.2s
--nbhd-carousel-paginationItem-backgroundColor-originColor var(--nbhd-color-black)
--nbhd-carousel-paginationItem-backgroundColor-alpha 0.3
--nbhd-carousel-nav-display none (block on 768px+)
--nbhd-carousel-navArrow-blockSize 37px
--nbhd-carousel-navArrow-inlineSize 37px
--nbhd-carousel-navArrow-borderRadius 50%
--nbhd-carousel-navArrow-backgroundColor-alpha 1
--nbhd-carousel-navArrow-borderColor var(--nbhd-color-black)
--nbhd-carousel-navArrow-color var(--nbhd-color-white)
--nbhd-carousel-navArrow-transitionDuration 0.2s
--nbhd-carouselContainer-transitionTimingFunction initial

Dependencies

This component contains the following components as dependencies.