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 -navigationVisible -wysiwyg">
<!-- 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 no-bottom-gutter list-unstyled">
<!-- Slides -->
<li class="swiper-slide col-auto">
<h1 class="h1">
Heading
<span class="sds-headingLight">Heading subtext</span>
</h1>
</li>
<li class="swiper-slide col-auto">
<div class="sds-videoPlayer js-videoPlayerV3">
<video class="sds-videoPlayer__video" poster="../../media/snet/illustrations/video-cover-nv-sitfin.jpeg" controls>
<source src="../../media/snet/videos/trimmed.mp4" type="video/mp4">
<track kind="captions" label="English" srclang="EN" src="../../media/snet/videos/subtitle.vtt" default>
</video>
<div class="sds-videoPlayer__captions js-videoPlayer__captions">
<div class="sds-videoPlayer__singleCaption js-videoPlayer__singleCaption -isActive" data-index="-1">No Subtitle</div>
<div class="sds-videoPlayer__singleCaption js-videoPlayer__singleCaption" data-index="0">English</div>
</div>
</div>
</li>
<li class="swiper-slide col-auto">
<div class="sds-document sds-box -column sds-scaleInteraction">
<div class="sds-document__imgContainer">
<img class="sds-document__img" src="../../media/spuerkeess-site/components/document-download/pret-au-logement.jpeg" alt="">
</div>
<div class="sds-document__body">
<div class="sds-stackXs">
<h3 class="h3">Brochure 'Guide du Prêt au Logement'</h3>
<p class="sds-document__description">La construction, l’achat ou la rénovation / transformation d’un logement est un projet important.</p>
</div>
<div class="sds-document__actionZone">
<span class="sds-document__meta sds-textHelperSmall">{Size}</span>
<a href="" class="sds-btn -btnPrimary sds-document__action stretched-link">
<span class="sds-btn__text">Télécharger</span>
<span class="sds-icon sds-icon-download"></span>
</a>
</div>
</div>
</div>
</li>
<li class="swiper-slide col-auto">
<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=800&zoomType=fullscreen" alt="">
</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 -navigationVisible -wysiwyg{% 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 no-bottom-gutter list-unstyled">
<!-- Slides -->
<li class="swiper-slide col-auto">
{% render "@heading--h1-subtext" %}
</li>
<li class="swiper-slide col-auto">
{% render "@snet-video-player--v3-video-tag" %}
</li>
<li class="swiper-slide col-auto">
{% render "@spk-document--column" %}
</li>
<li class="swiper-slide col-auto">
<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=800&zoomType=fullscreen" alt="">
</li>
</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 {
}
}