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).
By default the Carousel component will create a pagination dot for each item, which would be unweildy for larger collections.
If you have a large number of items to display, consider enabling freeScroll mode or consider if a carousel is the ideal component to use for a particular use case.