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-leaseSlider sds-slider -overflowVisible -navigationVisible">
<!-- 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="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
<div>
<img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=23&width=1200&zoomType=fullscreen" alt="">
</div>
</li>
<li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
<div>
<img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=21&width=1200&zoomType=fullscreen" alt="">
</div>
</li>
<li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
<div>
<img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=19&width=1200&zoomType=fullscreen" alt="">
</div>
</li>
<li class="sds-leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
<div>
<img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle=17&width=1200&zoomType=fullscreen" alt="">
</div>
</li>
</ul>
<div class="sds-leaseSlider__navigation">
<div class="row row-xs">
<div class="col-12 position-static">
<p class="sds-formDisclaimer sds-leaseSlider__disclaimer">
Photos non contractuelles
</p>
</div>
</div>
</div>
<!-- adjust row class for spacing between slides here -->
<nav class="sds-leaseSlider__navigation sds-slider__navigation row row-xs flex-nowrap align-items-center">
<div class="col-auto d-none d-md-flex">
<div class="sds-slider__pagination swiper-pagination"></div>
</div>
<div class="sds-leaseSlider__colorOptionsWrapper col">
<div class="sds-leaseSlider__colorNav" data-sds-gradient-overflow-h>
<div class="sds-leaseSlider__colorNavWrapper" data-sds-gradient-overflow-h-wrapper>
<div class="sds-leaseSlider__colorNavInner" data-sds-gradient-overflow-h-inner>
<button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">
<span class="sds-colorOption" style="background-color: #000000"></span>
<span class="sds-badgeSelector__text">Noir</span>
</button>
<button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">
<span class="sds-colorOption" style="background-color: #E9DB5C"></span>
<span class="sds-badgeSelector__text">Jaune</span>
</button>
<button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="true">
<span class="sds-colorOption" style="background-color: #4D6E90"></span>
<span class="sds-badgeSelector__text">Bleu</span>
</button>
<button type="button" class="sds-badgeSelector sds-leaseSlider__colorSelector -colorOption -labelHiddenMobile" aria-pressed="false">
<span class="sds-colorOption" style="background-color: #22AA77"></span>
<span class="sds-badgeSelector__text">Vert</span>
</button>
</div>
</div>
</div>
</div>
<div class="col col-md-auto">
<div class="row row-xs flex-md-row-reverse flex-nowrap">
<div class="col col-md-auto">
<button type="button" class="sds-btn -btnPrimary -block sds-leaseSlider__action">
<span class="sds-btn__text">Configurer</span>
</button>
</div>
<div class="col-auto">
<div class="sds-btnGroup">
<button type="button" class="sds-btn -iconBtn -btnSecondary swiper-button-prev">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary swiper-button-next">
<span class="sds-icon sds-icon-arrownext"></span>
</button>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
<div class="{{ namespace }}leaseSlider {{ 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,4) %}
<li class="{{ namespace }}leaseSlider__slide swiper-slide col-10 col-md-8 col-xxl-9">
<div>
<img class="img-fluid" src="https://cdn.imagin.studio/getImage?&=&customer=spuerkeess&make=opel&modelFamily=mokka-e&modelRange=mokka-e&modelVariant=od&modelYear=2021&powerTrain=fossil&transmission=0&bodySize=5&trim=0&paintId=pspc0068&angle={{ 23 - ((i + i)) }}&width=1200&zoomType=fullscreen" alt="">
</div>
</li>
{% endfor %}
</ul>
<div class="{{ namespace }}leaseSlider__navigation">
<div class="row row-xs">
<div class="col-12 position-static">
{% render "@form-disclaimer--default",{
classes: [namespace + "leaseSlider__disclaimer"],
text: "Photos non contractuelles"
},true %}
</div>
</div>
</div>
<!-- adjust row class for spacing between slides here -->
<nav class="{{ namespace }}leaseSlider__navigation {{ namespace }}slider__navigation row row-xs flex-nowrap align-items-center">
<div class="col-auto d-none d-md-flex">
<div class="{{ namespace }}slider__pagination swiper-pagination"></div>
</div>
<div class="{{ namespace }}leaseSlider__colorOptionsWrapper col">
<div class="{{ namespace }}leaseSlider__colorNav" data-{{ namespace }}gradient-overflow-h>
<div class="{{ namespace }}leaseSlider__colorNavWrapper" data-{{ namespace }}gradient-overflow-h-wrapper>
<div class="{{ namespace }}leaseSlider__colorNavInner" data-{{ namespace }}gradient-overflow-h-inner>
{% for key, item in leaseSliderCarColors %}
{% if item %}
{% render "@badge-selector--text",{
colorOption: item.colorOption,
eltType: "button",
classes: [namespace+"leaseSlider__colorSelector -colorOption -labelHiddenMobile"],
text: item.text,
attrs: {
"aria-pressed": item.pressed or "false"
}
},true %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="col col-md-auto">
<div class="row row-xs flex-md-row-reverse flex-nowrap">
<div class="col col-md-auto">
{% render "@btn-primary", {
classes: ["-block", namespace + "leaseSlider__action"],
text: "Configurer"
},true %}
</div>
<div class="col-auto">
<div class="{{ namespace }}btnGroup">
{% render "@icon-btn-secondary",{
icon: "icon-arrowprevious",
classes: ["swiper-button-prev"]
},true %}
{% render "@icon-btn-secondary",{
icon: "icon-arrownext",
classes: ["swiper-button-next"]
},true %}
</div>
</div>
</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 {
}
}