Slideshow

A slideshow component for cycling through a series of content such as images, text, or cards.
Usage recommendations
Recommended Not Recommended
Encourage Exploration: Use slideshows to highlight content that invites user curiosity and exploration, like "Did You Know?" facts or tips related to the main subject. No Critical Info: Don't use slideshows for essential content; it might be overlooked.
Series Introduction: Use the slideshow to introduce a series of upcoming events, workshops, or webinars that users may find value in, but which are not the primary focus of the page. Limit Slide Count: Too many slides can fatigue users.
Showcase Varied but Coherent Content Types: Employ the slideshow to display different types of media, such as images, short videos, and articles, ensuring they are unified by a common theme or message. Avoid Nested Slideshows: Nesting a slideshow within another slideshow can make navigation a confusing, disorienting experience for the user.
Twig Usage 
{% set slides %}
  {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
    content: 'content',
  } only %}
{% endset %}

{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides
} only %}
 Schema
Prop Name Description Type Default Value Option(s)
attributes

A Drupal attributes object. Applies extra HTML attributes to the <bolt-slideshow> tag.

 object —
  • —
content

Content of the Slideshow. Slides are expected here.

 any —
  • —
slides_per_view

Controls the number of slides to be shown at once.

 string 1
  • 1, 2, 3, 4
slides_per_group

Controls the number of slides to be swiped at once.

 string auto
  • auto, 1, 2, 3, 4
space_between

Controls the horizontal spacing between each slide.

 string medium
  • none, small, medium, large
nav_button_position

Positions the previous and next buttons to either inside or outside of the carousel container.

 string inside
  • inside or outside
no_nav_buttons

Visually hide the previous and next nav buttons.

 boolean false
  • —
free_scroll

Enables content to be freely scrolled and flicked without snapping to an end position. Automatically switches off the pagination and switches on the scrollbar.

 boolean false
  • —
autoplay

Enables content to begin swiping through slides on page load. This feature stops on user interaction.

 boolean false
  • —
overflow

Makes overflowing carousel slides visible on desktop only.

 boolean false
  • —
Install Install 
npm install @bolt/components-slideshow
Dependencies @bolt/core swiper