The sliders has an "inverted" variant, where the pagination element colors vary. Used with darker background parent elements.
You'll find an example config in the Assets panel on your right.
For further info, check out the swiperjs docs.
Only import the funcionalities we actually need this way, as exemplified in the Assets panel.
The overflow visible class lets the slider "break out" of its container, past the viewport edges, provided there're enough slides.
Adjust the row classes to change spacings between columns.
Classes have to be changed 3 times, as explained in the comments found in the HTML.
<div class="sds-slider -overflowVisible">
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div class="sds-slider__inner swiper" data-swiper>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="swiper-wrapper row row-xs flex-nowrap align-items-stretch-immediate no-bottom-gutter list-unstyled">
<!-- Slides -->
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
<li class="swiper-slide col-lg-4">
<article class="sds-product sds-box sds-scaleInteraction -insetLg -alignTop">
<div class="sds-product__inner sds-stackXl">
<div class="sds-product__mainContent">
<div class="sds-box__outOfBoundsLg sds-product__img sds-product__imgInlineEnd" data-sds-move-with-shadow>
<img src="../../media/spuerkeess-site/components/product/cards/sdsillu-product-card-classic.png" alt="" class="img-fluid">
</div>
<div class="sds-stackLg">
<div class="sds-product__header">
<div class="sds-product__meta sds-textHelperSmall">La classqiue</div>
<div class="sds-product__headerBtnGroup sds-btnGroup -wrap justify-content-end">
<div class="sds-badge badge -badgeHighlight -badgeMuted">
badge
</div>
</div>
</div>
<div class="sds-stackXs">
<h3 class="h3">Prêt personnel</h3>
<p class="sds-product__description">Empruntez au meilleur taux pour financer vos dépenses importantes</p>
</div>
</div>
</div>
<ul class="sds-list -checkIcon -checkIconAlt">
<li>
item
</li>
<li>
item
</li>
<li>
item
</li>
<li class="sds-list__disabled">
<span class="sr-only">N'est pas disponible:</span>
item
</li>
</ul>
<div class="sds-product__meta sds-textHelperSmall sds-exceptionStackLg">*sous réserve d'acceptation du dossier</div>
<footer class="sds-product__footer sds-stackLg">
<div class="sds-box -insetLg sds-box__outOfBoundsMd -boxSunken">
<div class="sds-stackXl">
<div class="row row-xs align-items-baseline no-bottom-gutter flex-nowrap">
<div class="col">
<div class="sds-label">
Prix par mois
</div>
</div>
<div class="col-auto text-right">
<div class="sds-colorInherit h1">9,50 €</div>
</div>
</div>
<div class="d-flex justify-content-center">
<a href="" class="sds-btn -btnPrimary stretched-link">
<span class="sds-btn__text">Faire une demande</span>
<span class="sds-icon sds-icon-arrownext"></span>
</a>
</div>
<p class="sds-staticExceptionStackMd sds-product__meta text-center sds-textHelper">Gratuit les 6 premiers mois</p>
</div>
</div>
<div class="sds-aboveClickArea text-center">
<a href="" class="sds-btn -btnSecondary -btnInverse">
<span class="sds-icon sds-icon-download"></span>
<span class="sds-btn__text">Consulter le dépliant</span>
</a>
</div>
</footer>
</div>
</article>
</li>
</ul>
<!-- adjust row class for spacing between slides here -->
<nav class="sds-slider__navigation row row-xs">
<div class="col">
<div class="sds-slider__pagination swiper-pagination"></div>
</div>
<div class="col-auto">
<div class="sds-btnGroup">
<button type="button" class="sds-slider__prev swiper-button-prev">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
<button type="button" class="sds-slider__next swiper-button-next">
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="{{ namespace }}slider{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}">
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div class="{{ namespace }}slider__inner swiper" data-swiper>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="swiper-wrapper row row-xs flex-nowrap align-items-stretch-immediate no-bottom-gutter list-unstyled">
<!-- Slides -->
{% for i in range(0,12) %}
<li class="swiper-slide col-lg-4">
{% render "@spk-product-column--spot-footer",{
modifiers: ["-insetLg","-alignTop"]
}, true %}
</li>
{% endfor %}
</ul>
<!-- adjust row class for spacing between slides here -->
<nav class="{{ namespace }}slider__navigation row row-xs">
<div class="col">
<div class="{{ namespace }}slider__pagination swiper-pagination"></div>
</div>
<div class="col-auto">
<div class="{{ namespace }}btnGroup">
<button type="button" class="{{ namespace }}slider__prev swiper-button-prev">
<span class="{{ namespace }}icon {{ namespace }}icon-arrowprevious"></span>
</button>
<button type="button" class="{{ namespace }}slider__next swiper-button-next">
<span class="{{ namespace }}icon {{ namespace }}icon-arrownext"></span>
</button>
</div>
</div>
</nav>
</div>
</div>
</div>
// core version + navigation, pagination modules:
import Swiper from 'swiper';
import { Navigation, Pagination, A11y, Keyboard} from 'swiper/modules';
export default class SwiperSlider {
constructor() {
this.fireSwiper();
}
fireSwiper(){
const swiper = document.querySelectorAll("[data-swiper]");
swiper.forEach((el, i) => {
const swiperInstance = new Swiper(el, {
// needed functionalities
modules: [Navigation, Pagination, A11y, Keyboard],
// Optional parameters
direction: 'horizontal',
keyboard: true,
slidesPerView: "auto",
// If we need pagination
pagination: {
el: '.swiper-pagination',
dynamicBullets: true
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
reachBeginning: function () {
console.log('swiper beginning reached');
},
reachEnd: function () {
console.log('swiper end reached');
}
}
});
})
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}documentSlider {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// documentSlider__childElement
&__childElement {
// follows same logic as parent
}
/* modifiers */
// documentSlider -contained
&.-contained {
// follows same logic as base element
width: $document-column-width-mobile-global;
@include media-breakpoint-up("lg") {
width: $document-column-width-desktop-global;
}
#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation {
display: flex;
align-items: center;
margin-left: 0;
margin-right: 0;
margin-top: map-deep-get($token-spacer-stack-max-map, "lg") !important;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}leaseSlider {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
padding-top: calc($badge-selector-height-global + map-deep-get($token-spacer-stack-max-map, "xl"));
@include media-breakpoint-up(md) {
padding-top: 0;
}
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// leaseSlider__action
&__action {
// follows same logic as parent
width: 100%;
@include media-breakpoint-up("md") {
width: auto;
}
}
&__colorOptionsWrapper {
position: absolute;
top: -$badge-selector-height-global - map-deep-get($token-spacer-stack-max-map, "xl");
left: 0;
@include media-breakpoint-up(md) {
top: auto;
left: auto;
position: relative;
overflow: hidden;
padding-right: $grid-gutter-width !important;
}
}
&__slide {
width: auto;
max-width: 100%;
IMG {
aspect-ratio: 16/10;
}
}
&__colorNav {
height: $badge-selector-height-global + $border-width*4;
overflow: hidden;
width: 100%;
position: relative;
&::before,
&::after {
width: map-deep-get($token-sizes-unit-map, "64");
}
}
&__colorNavWrapper {
overflow-x: auto;
padding-bottom: $badge-selector-height-global*0.5;
display: flex;
}
&__colorNavInner {
display: flex;
flex-wrap: nowrap;
flex-grow: 1;
@include spacer-component-inline("sm");
> *:first-of-type {
margin-left: auto;
}
> *:last-of-type {
margin-right: auto;
}
}
&__colorSelector {
@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");
flex-shrink: 0;
}
&__navigation {
padding-left: map-deep-get($token-spacer-inset-map, "sm");
padding-right: map-deep-get($token-spacer-inset-map, "sm");
@include media-breakpoint-up("md"){
padding-left: 0;
padding-right: 0;
margin-top: 0 !important;
}
}
&__disclaimer {
margin-bottom: map-deep-get($token-spacer-stack-max-map, "xl");
@include media-breakpoint-up("md") {
position: absolute;
top: 0;
left: 0;
@include make-col(3);
}
}
/* modifiers */
// leaseSlider -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}
/* variables specific to current element */
$element-specific-variables: "";
.#{$namespace}slider {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
/* Pseudo Elements */
&::before {
}
&::after {
}
/*
Include elements that are linked to the current element but have to reside at the root level of the stylesheet
(e.g: keyframes)
*/
@at-root {
}
/* children - write selector in full in comments in order to facilitate search */
// slider__inner
&__inner {
max-width: 100%;
}
// slider__navigation
&__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation {
// follows same logic as parent
display: none;
@include media-breakpoint-up(lg) {
margin-top: map-deep-get($token-spacer-stack-max-map, "3xl");
margin-left: 0;
margin-right: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
}
/* @TODO remove */
#{$self}__prev,
#{$self}__next {
@extend .#{$namespace}icon;
@include icon-btn-base();
@include icon-btn-default-size();
@include btn-secondary-all-states();
}
/* modifiers */
// slider -inverted
&.-inverted {
// follows same logic as base element
#{$self}__pagination {
> * {
@include custom-prop-fallback("background-color", "comp-page-controls-background-color");
&[class*="active-main"] {
@include custom-prop-fallback("background-color", "comp-page-controls-active-background-color");
}
}
}
#{$self}__prev,
#{$self}__next {
@include btn-secondary-inverse-all-states();
&[disabled] {
background-color: map-deep-get($token-icon-btn-cta-map, "secondary", "default", "background-color");
}
}
}
&.-overflowVisible {
#{$self}__inner {
overflow: visible;
}
}
&.-navigationVisible {
#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation {
display: flex;
align-items: center;
}
}
&.-navigationSmallSpacing {
#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation#{$self}__navigation {
margin-top: map-deep-get($token-spacer-stack-max-map, "lg");
}
}
&.-wysiwyg {
.swiper-slide {
width: auto;
max-width: 100%;
}
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}