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">
<!-- 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-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 1</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 2</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 3</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 4</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 5</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 6</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 7</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 8</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 9</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 10</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 11</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</article>
</li>
<li class="swiper-slide col-11 col-sm-8 col-md-5 col-lg-5">
<article class="sds-blogArticle sds-box">
<a href="#" class="sds-blogArticle__inner d-flex flex-column flex-grow-1">
<header class="sds-blogArticle__header text-center">
<img class="sds-blogArticle__img" src="../../media/illustrations/images/myTax.jpg" alt="">
<div class="sds-blogArticle__icon">
<img class="img-fluid" src="https://design.spuerkeess.lu/media/illustrations/svg240x240/spot/sdsillu-rocketship.svg" alt="">
</div>
</header>
<div class="sds-blogArticle__content sds-stackMd text-center">
<div class="sds-stackSm">
<span class="sds-blogArticle__helper sds-textHelperSmall">Aujourd'hui</span>
<div class="sds-blogArticle__subTitle">Entrepreneuriat</div>
<div class="h4 sds-textEllipsisSm">Slide 12</div>
</div>
<p class="sds-blogArticle__text sds-textEllipsisLg">Certains d’entre vous ne se souviennent même pas qu’il existait un temps où il fallait planifier le retrait de devises avant un voyage. Depuis plus de deux décennies, la zone euro nous permet de voyager spontanément. Pour la plupart des destinations européennes, plus besoin de passer à la banque préalablement pour retirer des devises !</p>
</div>
</a>
</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-btn -iconBtn -btnSecondary sds-slider__prev swiper-button-prev">
<span class="sds-icon sds-icon-arrowprevious"></span>
</button>
<button type="button" class="sds-btn -iconBtn -btnSecondary 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-11 col-sm-8 col-md-5 col-lg-5">
{% render "@spk-blog-article", {
title: "Slide " + (i + 1)
}, 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">
{% render "@icon-btn-secondary",{
classes: [namespace + "slider__prev","swiper-button-prev"],
icon: "icon-arrowprevious"
},true %}
{% render "@icon-btn-secondary",{
classes: [namespace + "slider__next","swiper-button-next"],
icon: "icon-arrownext"
},true %}
</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 {
}
}