<div>
<card-slider>
<div class="c-slider">
<div class="o-retain o-retain--default ">
<div class="o-flow">
<div class="swiper c-slider__container" data-module-bind="slider">
<ul class="swiper-wrapper o-list-clean c-slider__wrapper">
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Card heading
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Card heading
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Card heading
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Card heading
</a>
</h3>
</div>
</div>
</article>
</li>
<li class="swiper-slide c-slider__slide">
<article class="c-card t-bg--page-theme-dark t-color--light o-clickable ">
<picture>
<img class="c-img lazyload " data-srcset="https://via.placeholder.com/320x180 320w, https://via.placeholder.com/640x360 640w, " data-src="https://via.placeholder.com/320x180" alt="" sizes="auto" width="320" height="180">
</picture>
<div class="c-card__content">
<div class="o-flow o-flow--tiny">
<h3 class="u-h4">
<a href="#">
Card heading
</a>
</h3>
</div>
</div>
</article>
</li>
</ul>
</div>
<div class="o-layout o-layout--gap-base o-layout--align-block-center t-color--light" hidden data-card-slider-controls>
<div class="o-layout__fill">
<progress data-slider-progress class="c-progress" max="1" value="0"></progress>
</div>
<div class="o-layout__fit">
<button type="button" class="o-button-clean c-slider__button-clean" data-button-prev>
<span class="u-visually-hidden">Vorige</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-left" />
</svg>
</button>
</div>
<div class="o-layout__fit">
<button type="button" class="o-button-clean c-slider__button-clean" data-button-next>
<span class="u-visually-hidden">Volgende</span>
<svg class="c-icon " aria-hidden="true">
<use xlink:href="../../dist/sprite.svg#icon-arrow-right" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</card-slider>
</div>
<div>
<card-slider>
<div class="c-slider">
<div class="o-retain o-retain--default {{#if inset }}o-retain--inset{{/if}}">
<div class="o-flow">
<div class="swiper c-slider__container" data-module-bind="slider">
<ul class="swiper-wrapper o-list-clean c-slider__wrapper">
{{#each items }}
<li class="swiper-slide c-slider__slide">
{{#if isTypeNumber }}
{{ render '@molecules-card-number' this }}
{{ else }}
{{ render '@molecules-card' this merge=true }}
{{/if}}
</li>
{{/each}}
</ul>
</div>
<div class="o-layout o-layout--gap-base o-layout--align-block-center t-color--light" hidden data-card-slider-controls>
<div class="o-layout__fill">
{{> '@atoms-progress' data='data-slider-progress' }}
</div>
<div class="o-layout__fit">
<button
type="button"
class="o-button-clean c-slider__button-clean"
data-button-prev
>
<span class="u-visually-hidden">Vorige</span>
{{> '@atoms-icon' icon='arrow-left' }}
</button>
</div>
<div class="o-layout__fit">
<button
type="button"
class="o-button-clean c-slider__button-clean"
data-button-next
>
<span class="u-visually-hidden">Volgende</span>
{{> '@atoms-icon' icon='arrow-right' }}
</button>
</div>
</div>
</div>
</div>
</div>
</card-slider>
</div>
{
"inset": false,
"items": [
{},
{},
{},
{},
{}
]
}
No notes defined.