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 %}