@bolt/components-carousel

A web-component powered carousel component for cycling through a series of content such as images, text, or cards.

Usage no npm install needed!

<script type="module">
  import boltComponentsCarousel from 'https://cdn.skypack.dev/@bolt/components-carousel';
</script>

README

The <bolt-carousel> provides all the basic functionality expected with a modern carousel with a sliding effect, left/right arrow buttons, and page dots. The user can move between each carousel slide with touch, the mouse, the keyboard, or a trackpad.

Under the hood, the <bolt-carousel> component uses the excellent Swiper library to provide top-notice mobile, responsive, and touch support.

Install via yarn
yarn add @bolt/components-carousel

Usage

Via Web Component 
<bolt-carousel>
  <bolt-carousel-slide>
    Slide 1
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 2
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    Slide 3
  </bolt-carousel-slide>
</bolt-carousel>
Via Twig 
{% include "@bolt-components-carousel/carousel.twig" with {
  slides: [
    'Slide 1',
    'Slide 2',
    'Slide 3',
  ]
} only %}

Guidelines

The <bolt-carousel> component is most appropriate when:

  • You want to present to the user with a collection of images, or a mixture of images and text content.
  • You want to allow the user focus on a single item at a time.
  • The total number of items to display is relative small (between 2 and 10 items).