slideshow docs

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

slideshow

Basic Slideshow A slideshow component embeds a responsive, interactive carousel on the page.
Important Notes: When passing data to the content prop, use the slideshow-slide sub-template.
Demo
Light Theme
Slide 1
Slide 2
Slide 3
Dark Theme
Slide 1
Slide 2
Slide 3
Twig
{% set slides %}
  {% include '@bolt-components-slideshow/slideshow-slide.twig' with {
    content: 'content',
  } only %}
  ...
{% endset %}

{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow slides per view

Slides Per View Controls the number of slides to be shown at once. Demo
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  slides_per_view: '3',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow slides per group

Slides Per Group Controls the number of slides to be swiped at once.
Important Notes: The default value is auto, this means that this value will be equal to the slides_per_view. Set a numeric value to overide the auto value.
Demo
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  slides_per_group: '2',
  slides_per_view: '3',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow space between

Space Between Controls the horizontal spacing between each slide.
Important Notes: This prop is set using the design systems spacing values.
Demo
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  space_between: 'large',
  slides_per_view: '3',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow nav button position

Nav Button Position Positions the previous and next buttons to either inside or outside of the carousel container.
Important Notes: Setting the prop to outside will also slightly shrink the width of the component.
Demo
Light Theme
Slide 1
Slide 2
Slide 3
Dark Theme
Slide 1
Slide 2
Slide 3
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  nav_button_position: 'outside',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow no nav buttons

No Nav Buttons Visually hide the previous and next nav buttons. Demo
Slide 1
Slide 2
Slide 3
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  no_nav_buttons: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow free scroll

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. Demo
Slide 1
Slide 2
Slide 3
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  free_scroll: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow overflow

Overflow Makes overflowing carousel slides visible on desktop only.
Important Notes: This change is only visible on large breakpoint and above, this prevents a related issue with scrolling on mobile devices.
Demo
Slide 1
Slide 2
Slide 3
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  overflow: true,
  space_between: 'small',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow autoplay

Autoplay Enables content to begin swiping through slides on page load. This feature stops on user interaction. Demo
Slide 1
Slide 2
Slide 3
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  autoplay: true,
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow use case cards

Use Case: Cards Demo for a card based slideshow
Important Notes: This is built to loosely mimic the Academy Dashboard.
Demo
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  slides_per_view: '3',
  nav_button_position: 'outside',
} only %}
HTML
Not available in plain HTML. Please use Twig.

slideshow use case teasers

Use Case: Teasers Demo for a teaser based slideshow
Important Notes: This is built to loosely mimic Alan's picks from the Best of Content Gallery. These teasers trigger a video modal.
Demo
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Alt text.
7 mins

Chicken bacon doner pancetta pork corned beef, swine jowl burgdoggen pastrami buffalo beef ribs shankle. Turducken pork porchetta shankle, salami short ribs corned beef. Short ribs turkey burgdoggen, fatback jerky chuck landjaeger corned beef pork t-bone jowl hamburger brisket strip steak. Tenderloin cow bacon cupim t-bone short ribs swine biltong beef ribs capicola sausage beef.
Chip 1
Chip 2
Twig
{% include '@bolt-components-slideshow/slideshow.twig' with {
  content: slides,
  slides_per_view: '4',
  nav_button_position: 'outside',
} only %}
HTML
Not available in plain HTML. Please use Twig.