Web Component Usage Bolt carousel is a web component, you can simply use <bolt-carousel> in the markup to make it render. For each slide, you must use <bolt-carousel-slide> to wrap around the slide content.
Slide 1
Slide 2
Slide 3
 
<bolt-carousel>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
  </bolt-carousel-slide>
</bolt-carousel>
Basic Usage The web component has all the options shown in the schema table. You can define each prop within the <bolt-carousel> element. Use unique combinations to customize a carousel to your liking.
Slide 1
Slide 2
Slide 3
Slide 4
 
<bolt-carousel nav-button-position="inside" slides-per-view=2 loop autoplay>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-xlight">Slide 4</div>
  </bolt-carousel-slide>
</bolt-carousel>
Server-side Rendered Web Components (Experimental) The <bolt-carousel> component, among many other web components in Bolt, will support server-side rendering via the new upcoming {% filter bolt_ssr %} custom Twig filter. Check out the docs on server-side rendering for information!
Slide 1
Slide 2
Slide 3
 
{% filter bolt_ssr %} 
<bolt-carousel>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-xdark">Slide 1</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-dark">Slide 2</div>
  </bolt-carousel-slide>
  <bolt-carousel-slide>
    <div class="u-bolt-padding-large t-bolt-light">Slide 3</div>
  </bolt-carousel-slide>
</bolt-carousel>
 {% endfilter %}