Carousel
A slideshow component for cycling through elements—images or slides of text—like a carousel.
Enable Component
Enable component from within your frontal.config.js as follows
// frontal.config.js
module.exports = {
    bundles: {
        main: {
            pages: ['**/*.html'],
            components: {
                carousel: true
            }
        }
    }
}
Basic Usage
You can build your own using the previewer
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
</div>
NameDescription
.carouselBase class of the entire carousel component
.carousel.slideApplies slide effect when switching between items
.carousel > .carousel-indicatorsBase class of the carousel indicators element within the carousel wrapper
.carousel > .carousel-innerBase class of the carousel items wrapper within the carousel wrapper
.carousel > .carousel-inner > .carousel-itemBase class of a single carousel item wrapper within the carousel items wrapper
.carousel > .carousel-inner > .carousel-item.activeIndicates the current active carousel item
.carousel > .carousel-inner > .carousel-item > .carousel-captionBase class of a carousel single item's caption
.carousel > .carousel-control-prevBase class of the previous button wrapper
.carousel > .carousel-control-prev > .carousel-control-prev-iconBase class of the previous arrow icon
.carousel > .carousel-control-nextBase class of the next button wrapper
.carousel > .carousel-control-next > .carousel-control-next-iconBase class of the next arrow icon
Customize variables at:/library/extend/components/_carousel.scss
Component's defaults:/library/components/carousel/_defaults.scss
NameDefault valueNote
$carousel-control-color$white
$carousel-control-width15%
$carousel-control-opacity.5
$carousel-control-hover-opacity.9
$carousel-control-transitionopacity .15s ease
$carousel-indicator-width30px
$carousel-indicator-height3px
$carousel-indicator-hit-area-height10px
$carousel-indicator-spacer3px
$carousel-indicator-opacity.5
$carousel-indicator-active-bg$white
$carousel-indicator-active-opacity1
$carousel-indicator-transitionopacity .6s ease
$carousel-caption-width70%
$carousel-caption-color$white
$carousel-caption-padding-y1.25rem
$carousel-caption-spacer1.25rem
$carousel-control-icon-width2.5rem
$carousel-control-prev-icon-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' height='24px' fill='#{$carousel-control-color}'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z'/></svg>")
$carousel-control-next-icon-bgurl("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24px' height='24px' fill='#{$carousel-control-color}'><path d='M0 0h24v24H0V0z' fill='none'/><path d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/></svg>")
$carousel-transition-duration.6s
$carousel-dark-indicator-active-bg$black
$carousel-dark-caption-color$black
$carousel-dark-control-icon-filterinvert(1) grayscale(100)

Make sure to read the Customize components and Understanding and using the design system guides.

{title}