<!-- Default -->
<div class="carousel card-group" id="carousel-1">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-1__title">Card Carousel</h2>
<div class="card-group__description" id="carousel-1__description">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":"--fw-container-gutter-px"}' aria-labelledby="carousel-1__title" aria-describedby="carousel-1__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-1__item-1" data-js-carousel-item aria-labelledby="carousel-1__item-1-title" aria-describedby="carousel-1__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-1__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-1__item-2" data-js-carousel-item aria-labelledby="carousel-1__item-2-title" aria-describedby="carousel-1__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-1__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-1__item-3" data-js-carousel-item aria-labelledby="carousel-1__item-3-title" aria-describedby="carousel-1__item-3-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-3-title">Card Three</h3>
<div class="card-group__item-description" id="carousel-1__item-3-description">
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-1__item-4" data-js-carousel-item aria-labelledby="carousel-1__item-4-title" aria-describedby="carousel-1__item-4-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-4-title">Card Four</h3>
<div class="card-group__item-description" id="carousel-1__item-4-description">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-1__item-5" data-js-carousel-item aria-labelledby="carousel-1__item-5-title" aria-describedby="carousel-1__item-5-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-5-title">Card Five</h3>
<div class="card-group__item-description" id="carousel-1__item-5-description">
<p>Maecenas sed diam eget risus varius blandit sit amet.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-1__item-6" data-js-carousel-item aria-labelledby="carousel-1__item-6-title" aria-describedby="carousel-1__item-6-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-1__item-6-title">Card Six</h3>
<div class="card-group__item-description" id="carousel-1__item-6-description">
<p>Praesent commodo cursus magna vel scelerisque nisl.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Single Item -->
<div class="carousel card-group carousel--single-item" id="carousel-6">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-6__title">Single Item Carousel (With Video)</h2>
<div class="card-group__description" id="carousel-6__description">
<p>Full-width slides with bullet pagination and prev/next buttons.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":0,"slidesOffsetBefore":0,"slidesOffsetAfter":0,"slidesPerView":1,"pagination":{"type":"bullets"}}' aria-labelledby="carousel-6__title" aria-describedby="carousel-6__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item carousel__item--video" data-js-carousel-item aria-label="1 of 4">
<div class="card-group__item">
<figure class="video-embed__figure">
<img class="video-embed__image" srcset="https://images.fastspot.com/framework/1440x810/1 1440w, https://images.fastspot.com/framework/1220x686/1 1220w, https://images.fastspot.com/framework/980x552/1 980w, https://images.fastspot.com/framework/740x416/1 740w, https://images.fastspot.com/framework/500x282/1 500w, https://images.fastspot.com/framework/300x169/1 300w" src="https://images.fastspot.com/framework/300x169/1" alt="" loading="lazy" width="300" height="169">
<div class="
video-lazy
video-embed__video-lazy
video-lazy--aspect-
" data-js-video-lazy='{"id":"3atcjPFBb-Y","type":"youtube","display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
<a class="video-lazy__play" data-js-video-lazy-play href="https://www.youtube.com/watch?v=3atcjPFBb-Y" aria-label="Play Fastspot Work">
<svg class="icon icon--video-play">
<use href="/images/icons.svg?1.0.0#video-play" />
</svg>
</a>
<div class="video-lazy__iframe-wrapper">
<div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
</div>
</div>
</figure>
</div>
</div>
<div class="swiper-slide carousel__item carousel__item--video" data-js-carousel-item aria-label="2 of 4">
<div class="card-group__item">
<figure class="video-embed__figure">
<img class="video-embed__image" srcset="https://images.fastspot.com/framework/1440x810/2 1440w, https://images.fastspot.com/framework/1220x686/2 1220w, https://images.fastspot.com/framework/980x552/2 980w, https://images.fastspot.com/framework/740x416/2 740w, https://images.fastspot.com/framework/500x282/2 500w, https://images.fastspot.com/framework/300x169/2 300w" src="https://images.fastspot.com/framework/300x169/2" alt="" loading="lazy" width="300" height="169">
<div class="
video-lazy
video-embed__video-lazy
video-lazy--aspect-
" data-js-video-lazy='{"id":"258133523","type":"vimeo","display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
<a class="video-lazy__play" data-js-video-lazy-play href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
<svg class="icon icon--video-play">
<use href="/images/icons.svg?1.0.0#video-play" />
</svg>
</a>
<div class="video-lazy__iframe-wrapper">
<div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
</div>
</div>
</figure>
</div>
</div>
<div class="swiper-slide carousel__item carousel__item--video" data-js-carousel-item aria-label="3 of 4">
<div class="card-group__item">
<figure class="video-embed__figure">
<img class="video-embed__image" srcset="https://images.fastspot.com/framework/1440x810/3 1440w, https://images.fastspot.com/framework/1220x686/3 1220w, https://images.fastspot.com/framework/980x552/3 980w, https://images.fastspot.com/framework/740x416/3 740w, https://images.fastspot.com/framework/500x282/3 500w, https://images.fastspot.com/framework/300x169/3 300w" src="https://images.fastspot.com/framework/300x169/3" alt="" loading="lazy" width="300" height="169">
<div class="
video-lazy
video-embed__video-lazy
video-lazy--aspect-
" data-js-video-lazy='{"id":"3atcjPFBb-Y","type":"youtube","display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
<a class="video-lazy__play" data-js-video-lazy-play href="https://www.youtube.com/watch?v=3atcjPFBb-Y" aria-label="Play Fastspot Work">
<svg class="icon icon--video-play">
<use href="/images/icons.svg?1.0.0#video-play" />
</svg>
</a>
<div class="video-lazy__iframe-wrapper">
<div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
</div>
</div>
</figure>
</div>
</div>
<div class="swiper-slide carousel__item carousel__item--video" data-js-carousel-item aria-label="4 of 4">
<div class="card-group__item">
<figure class="video-embed__figure">
<img class="video-embed__image" srcset="https://images.fastspot.com/framework/1440x810/4 1440w, https://images.fastspot.com/framework/1220x686/4 1220w, https://images.fastspot.com/framework/980x552/4 980w, https://images.fastspot.com/framework/740x416/4 740w, https://images.fastspot.com/framework/500x282/4 500w, https://images.fastspot.com/framework/300x169/4 300w" src="https://images.fastspot.com/framework/300x169/4" alt="" loading="lazy" width="300" height="169">
<div class="
video-lazy
video-embed__video-lazy
video-lazy--aspect-
" data-js-video-lazy='{"id":"258133523","type":"vimeo","display":"inline","aspectRatio":"landscape","autoplay":false,"playerVars":{}}'>
<a class="video-lazy__play" data-js-video-lazy-play href="https://vimeo.com/258133523" aria-label="Play Fastspot Moments">
<svg class="icon icon--video-play">
<use href="/images/icons.svg?1.0.0#video-play" />
</svg>
</a>
<div class="video-lazy__iframe-wrapper">
<div class="video-lazy__iframe-target" data-js-video-lazy-iframe-target></div>
</div>
</div>
</figure>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-pagination" data-js-carousel-pagination>
</div>
<div class="carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Wide Slides -->
<div class="carousel card-group carousel--wide" id="carousel-10">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-10__title">Wide Slides</h2>
<div class="card-group__description" id="carousel-10__description">
<p>Slides span 6 grid columns instead of 4.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":"--fw-container-gutter-px"}' aria-labelledby="carousel-10__title" aria-describedby="carousel-10__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-10__item-1" data-js-carousel-item aria-labelledby="carousel-10__item-1-title" aria-describedby="carousel-10__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-10__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-10__item-2" data-js-carousel-item aria-labelledby="carousel-10__item-2-title" aria-describedby="carousel-10__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-10__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-10__item-3" data-js-carousel-item aria-labelledby="carousel-10__item-3-title" aria-describedby="carousel-10__item-3-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-3-title">Card Three</h3>
<div class="card-group__item-description" id="carousel-10__item-3-description">
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-10__item-4" data-js-carousel-item aria-labelledby="carousel-10__item-4-title" aria-describedby="carousel-10__item-4-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-4-title">Card Four</h3>
<div class="card-group__item-description" id="carousel-10__item-4-description">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-10__item-5" data-js-carousel-item aria-labelledby="carousel-10__item-5-title" aria-describedby="carousel-10__item-5-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-5-title">Card Five</h3>
<div class="card-group__item-description" id="carousel-10__item-5-description">
<p>Maecenas sed diam eget risus varius blandit sit amet.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-10__item-6" data-js-carousel-item aria-labelledby="carousel-10__item-6-title" aria-describedby="carousel-10__item-6-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-10__item-6-title">Card Six</h3>
<div class="card-group__item-description" id="carousel-10__item-6-description">
<p>Praesent commodo cursus magna vel scelerisque nisl.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Contained -->
<div class="carousel carousel--contained" id="carousel-11">
<div class="fw-container">
<div class="card-group__header">
<h2 class="card-group__title" id="carousel-11__title">Contained Carousel</h2>
<div class="card-group__description" id="carousel-11__description">
<p>Swiper inside fw-container. Both edges clipped to the grid.</p>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":0,"slidesOffsetAfter":0}' aria-labelledby="carousel-11__title" aria-describedby="carousel-11__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-11__item-1" data-js-carousel-item aria-labelledby="carousel-11__item-1-title" aria-describedby="carousel-11__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-11__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-11__item-2" data-js-carousel-item aria-labelledby="carousel-11__item-2-title" aria-describedby="carousel-11__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-11__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-11__item-3" data-js-carousel-item aria-labelledby="carousel-11__item-3-title" aria-describedby="carousel-11__item-3-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-3-title">Card Three</h3>
<div class="card-group__item-description" id="carousel-11__item-3-description">
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-11__item-4" data-js-carousel-item aria-labelledby="carousel-11__item-4-title" aria-describedby="carousel-11__item-4-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-4-title">Card Four</h3>
<div class="card-group__item-description" id="carousel-11__item-4-description">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-11__item-5" data-js-carousel-item aria-labelledby="carousel-11__item-5-title" aria-describedby="carousel-11__item-5-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-5-title">Card Five</h3>
<div class="card-group__item-description" id="carousel-11__item-5-description">
<p>Maecenas sed diam eget risus varius blandit sit amet.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-11__item-6" data-js-carousel-item aria-labelledby="carousel-11__item-6-title" aria-describedby="carousel-11__item-6-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-11__item-6-title">Card Six</h3>
<div class="card-group__item-description" id="carousel-11__item-6-description">
<p>Praesent commodo cursus magna vel scelerisque nisl.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="carousel__controls-inner">
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- Breakpoint Disabled -->
<div class="carousel card-group" id="carousel-12">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-12__title">Breakpoint Disabled</h2>
<div class="card-group__description" id="carousel-12__description">
<p>Carousel deactivates at 980px.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":0,"breakpoints":{"980":{"enabled":false}}}' aria-labelledby="carousel-12__title" aria-describedby="carousel-12__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-12__item-1" data-js-carousel-item aria-labelledby="carousel-12__item-1-title" aria-describedby="carousel-12__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-12__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-12__item-2" data-js-carousel-item aria-labelledby="carousel-12__item-2-title" aria-describedby="carousel-12__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-12__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-12__item-3" data-js-carousel-item aria-labelledby="carousel-12__item-3-title" aria-describedby="carousel-12__item-3-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-3-title">Card Three</h3>
<div class="card-group__item-description" id="carousel-12__item-3-description">
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-12__item-4" data-js-carousel-item aria-labelledby="carousel-12__item-4-title" aria-describedby="carousel-12__item-4-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-4-title">Card Four</h3>
<div class="card-group__item-description" id="carousel-12__item-4-description">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-12__item-5" data-js-carousel-item aria-labelledby="carousel-12__item-5-title" aria-describedby="carousel-12__item-5-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-5-title">Card Five</h3>
<div class="card-group__item-description" id="carousel-12__item-5-description">
<p>Maecenas sed diam eget risus varius blandit sit amet.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-12__item-6" data-js-carousel-item aria-labelledby="carousel-12__item-6-title" aria-describedby="carousel-12__item-6-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-12__item-6-title">Card Six</h3>
<div class="card-group__item-description" id="carousel-12__item-6-description">
<p>Praesent commodo cursus magna vel scelerisque nisl.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Locked (Few Items) -->
<div class="carousel card-group" id="carousel-13">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-13__title">Locked Carousel</h2>
<div class="card-group__description" id="carousel-13__description">
<p>Only two items — not enough to scroll. Controls auto-hide.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":"--fw-container-gutter-px"}' aria-labelledby="carousel-13__title" aria-describedby="carousel-13__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-13__item-1" data-js-carousel-item aria-labelledby="carousel-13__item-1-title" aria-describedby="carousel-13__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-13__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-13__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-13__item-2" data-js-carousel-item aria-labelledby="carousel-13__item-2-title" aria-describedby="carousel-13__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-13__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-13__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Progress Bar -->
<div class="carousel card-group" id="carousel-14">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="carousel-14__title">Progress Bar</h2>
<div class="card-group__description" id="carousel-14__description">
<p>Progress bar pagination with prev/next buttons.</p>
</div>
</div>
</div>
<section class="swiper carousel__swiper" data-js-carousel='{"spaceBetween":"--fw-column-gap-px","slidesOffsetBefore":"--fw-container-gutter-px","slidesOffsetAfter":0,"pagination":{"type":"progressbar"}}' aria-labelledby="carousel-14__title" aria-describedby="carousel-14__description">
<div class="swiper-wrapper">
<div class="swiper-slide carousel__item" id="carousel-14__item-1" data-js-carousel-item aria-labelledby="carousel-14__item-1-title" aria-describedby="carousel-14__item-1-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-1-title">Card One</h3>
<div class="card-group__item-description" id="carousel-14__item-1-description">
<p>Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Bibendum</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-14__item-2" data-js-carousel-item aria-labelledby="carousel-14__item-2-title" aria-describedby="carousel-14__item-2-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-2-title">Card Two</h3>
<div class="card-group__item-description" id="carousel-14__item-2-description">
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Fringilla</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-14__item-3" data-js-carousel-item aria-labelledby="carousel-14__item-3-title" aria-describedby="carousel-14__item-3-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/3 740w, https://images.fastspot.com/framework/500x334/3 500w, https://images.fastspot.com/framework/300x200/3 300w" src="https://images.fastspot.com/framework/300x200/3" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-3-title">Card Three</h3>
<div class="card-group__item-description" id="carousel-14__item-3-description">
<p>Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Mattis Consectetur</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-14__item-4" data-js-carousel-item aria-labelledby="carousel-14__item-4-title" aria-describedby="carousel-14__item-4-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/4 740w, https://images.fastspot.com/framework/500x334/4 500w, https://images.fastspot.com/framework/300x200/4 300w" src="https://images.fastspot.com/framework/300x200/4" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-4-title">Card Four</h3>
<div class="card-group__item-description" id="carousel-14__item-4-description">
<p>Vestibulum id ligula porta felis euismod semper.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Porta Felis</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-14__item-5" data-js-carousel-item aria-labelledby="carousel-14__item-5-title" aria-describedby="carousel-14__item-5-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/1 740w, https://images.fastspot.com/framework/500x334/1 500w, https://images.fastspot.com/framework/300x200/1 300w" src="https://images.fastspot.com/framework/300x200/1" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-5-title">Card Five</h3>
<div class="card-group__item-description" id="carousel-14__item-5-description">
<p>Maecenas sed diam eget risus varius blandit sit amet.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Varius Blandit</span>
</span>
</a>
</div>
</div>
</div>
<div class="swiper-slide carousel__item" id="carousel-14__item-6" data-js-carousel-item aria-labelledby="carousel-14__item-6-title" aria-describedby="carousel-14__item-6-description">
<div class="card-group__item">
<figure class="card-group__item-figure">
<img class="card-group__item-image" srcset="https://images.fastspot.com/framework/740x494/2 740w, https://images.fastspot.com/framework/500x334/2 500w, https://images.fastspot.com/framework/300x200/2 300w" src="https://images.fastspot.com/framework/300x200/2" alt="" loading="lazy" width="300" height="200">
</figure>
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="carousel-14__item-6-title">Card Six</h3>
<div class="card-group__item-description" id="carousel-14__item-6-description">
<p>Praesent commodo cursus magna vel scelerisque nisl.</p>
</div>
</div>
<div class="card-group__item-links">
<a class="button-text--large
" href="#">
<span class="button-text--large__inner"> <span class="button-text--large__label">Scelerisque Nisl</span>
</span>
</a>
</div>
</div>
</div>
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
<div class="swiper-pagination carousel__progress">
</div>
<div class="swiper-buttons carousel__buttons">
<button class="swiper-button
swiper-button--prev
carousel__button swiper-button-prev" data-js-carousel-arrow-prev="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Previous Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-left">
<use href="/images/icons.svg?1.0.0#arrow-left" />
</svg></span>
</span>
</button>
<button class="swiper-button
swiper-button--next
carousel__button swiper-button-next" data-js-carousel-arrow-next="">
<span class="swiper-button__inner"> <span class="swiper-button__label">Next Slide</span>
<span class="swiper-button__icon" aria-hidden="true"><svg class="icon icon--arrow-right">
<use href="/images/icons.svg?1.0.0#arrow-right" />
</svg></span>
</span>
</button>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Default -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<!-- Single Item -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
data-js-carousel-item
aria-label="{{ loop.index ~ ' of ' ~ loop.length }}"
>
<div class="card-group__item">
<figure class="video-embed__figure">
{% include '@partial-image' with {
class: 'video-embed__image',
image: item.image,
alt: item.alt|default(''),
loading: 'lazy',
crop: 'wide',
max: 'xlrg'
} only %}
{% include '@partial-video-lazy' with {
classes: {
base: 'video-embed__video-lazy',
modifiers: []
},
video: {
id: item.video.id,
type: item.video.type,
title: item.video.title
},
} only %}
</figure>
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div
class="swiper-pagination"
data-js-carousel-pagination
>
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<!-- Wide Slides -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<!-- Contained -->
{% set id = uniqid('carousel') %}
<div class="carousel carousel--contained{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="fw-container">
<div class="card-group__header">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</section>
</div>
</div>
<!-- Breakpoint Disabled -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<!-- Locked (Few Items) -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
<!-- Progress Bar -->
{% set id = uniqid('carousel') %}
<div class="carousel card-group{% for modifier in modifiers|default([]) %} carousel--{{ modifier }}{% endfor %}" id="{{ id }}">
<div class="card-group__header">
<div class="fw-container">
<h2 class="card-group__title" id="{{ id ~ '__title' }}">
{{- group_title -}}
</h2>
<div class="card-group__description" id="{{ id ~ '__description' }}">
<p>{{ group_description }}</p>
</div>
</div>
</div>
<section
class="swiper carousel__swiper"
data-js-carousel='{{ carousel_config|json_encode }}'
aria-labelledby="{{ id ~ '__title' }}"
aria-describedby="{{ id ~ '__description' }}"
>
<div class="swiper-wrapper">
{% for item in items %}
{% set item_id = id ~ '__item-' ~ loop.index %}
<div
class="swiper-slide carousel__item{{ item.video is defined ? ' carousel__item--video' : '' }}"
id="{{ item_id }}"
data-js-carousel-item
aria-labelledby="{{ item_id ~ '-title' }}"
aria-describedby="{{ item_id ~ '-description' }}"
>
<div class="card-group__item">
{% if item.image %}
<figure class="card-group__item-figure">
{% include '@partial-image' with {
class: 'card-group__item-image',
alt: item.alt|default(''),
image: item.image,
loading: 'lazy',
crop: 'classic',
max: 'sml'
} only %}
</figure>
{% endif %}
<div class="card-group__item-body">
<h3 class="card-group__item-title" id="{{ item_id ~ '-title' }}">{{ item.title }}</h3>
<div class="card-group__item-description" id="{{ item_id ~ '-description' }}">
<p>{{ item.description }}</p>
</div>
</div>
{% if item.link is defined %}
<div class="card-group__item-links">
{% include '@partial-link' with {
classes: {
base: 'button-text--large'
},
title: item.link.title,
url: item.link.url,
icon: null
} only %}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<div class="swiper-controls carousel__controls">
<div class="fw-container">
<div class="carousel__controls-inner">
{% if controls.pagination == true %}
<div class="swiper-pagination carousel__progress">
</div>
{% endif %}
{% if controls.buttons == true %}
<div class="swiper-buttons carousel__buttons">
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['prev'],
utility: 'carousel__button swiper-button-prev'
},
attributes: {
'data-js-carousel-arrow-prev': ''
},
title: 'Previous Slide',
icon: 'arrow-left'
} only %}
{% include '@partial-button' with {
classes: {
base: 'swiper-button',
modifiers: ['next'],
utility: 'carousel__button swiper-button-next'
},
attributes: {
'data-js-carousel-arrow-next': ''
},
title: 'Next Slide',
icon: 'arrow-right'
} only %}
</div>
{% endif %}
</div>
</div>
</div>
</section>
</div>
No notes defined.