The -itemsAutoWidth can be added to remove the fixed width on the items
The --itemsAutoWidthGrow can be added to remove the fixed width on the items and have them take up all available space with a 320px max-width
<div class="sds-scrollToNav sds-slider" data-js-scroll-to-nav>
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div role="region" aria-roledescription="carousel" class="sds-slider__inner swiper sds-scrollToNav__inner" data-js-scroll-to-nav-swiper>
<div class="sds-scrollToNav__prev swiper-button-prev"></div>
<div class="sds-scrollToNav__next swiper-button-next"></div>
<div class="sds-slider__navigation row row-xs justify-content-end w-100">
<div class="col-auto">
<ul class="sds-btnGroup">
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-slider__prev swiper-button-prev" aria-label="Previous slide">
<span aria-hidden="true" class="sds-icon sds-icon-arrowprevious"></span>
</button>
</li>
<li>
<button type="button" class="sds-btn -iconBtn -btnSecondary sds-slider__next swiper-button-next" aria-label="Next slide">
<span aria-hidden="true" class="sds-icon sds-icon-arrownext"></span>
</button>
</li>
</ul>
</div>
</div>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="sds-scrollToNav__innerWrapper swiper-wrapper list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Gérer le quotidien
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Financer
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Epargner & Investir
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Famille & Partenariat
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Produits fiscalement déductibles
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Assurances
</p>
</div>
</a>
</div>
</li>
<li aria-roledescription="slide" class="swiper-slide col">
<div class="sds-scrollToNav__item">
<a href="#test" class="sds-tile sds-box -boxOverlaid sds-scaleInteraction -tileCentered -noInteraction" data-js-scroll-nav-interactable-item="">
<div class="sds-media -mediaXs">
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M27.7782 17.7071L13.6361 31.8493L12.2219 30.4351L26.364 16.2929L27.7782 17.7071Z" fill="#DE0000" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 42C4 44.7614 6.23858 47 9 47H24V45H9C7.34315 45 6 43.6569 6 42V4L34 4L34 20L34 21L34 42C34 44.7614 36.2386 47 39 47H40C42.7614 47 45 44.7614 45 42V20H36L36 2H4V42ZM39 45C37.3431 45 36 43.6569 36 42L36 22H43V42C43 43.6569 41.6569 45 40 45H39ZM26 27C24.8954 27 24 27.8954 24 29C24 30.1046 24.8954 31 26 31C27.1046 31 28 30.1046 28 29C28 27.8954 27.1046 27 26 27ZM22 29C22 26.7909 23.7909 25 26 25C28.2091 25 30 26.7909 30 29C30 31.2091 28.2091 33 26 33C23.7909 33 22 31.2091 22 29ZM12 19C12 17.8954 12.8954 17 14 17C15.1046 17 16 17.8954 16 19C16 20.1046 15.1046 21 14 21C12.8954 21 12 20.1046 12 19ZM14 15C11.7909 15 10 16.7909 10 19C10 21.2091 11.7909 23 14 23C16.2091 23 18 21.2091 18 19C18 16.7909 16.2091 15 14 15Z" fill="#003060" />
</svg>
</div>
<div class="sds-tile__body">
<p class="sds-label">
Business
</p>
</div>
</a>
</div>
</li>
</ul>
</div>
</div>
<div class="sds-scrollToNav__fakeInteraction" aria-hidden="true"></div>
</div>
<div class="{{ namespace }}scrollToNav {{ namespace }}slider{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}"{% for attrKey, attr in attrs %} {{ attrKey }}="{{ attr }}"{% endfor %} data-js-scroll-to-nav>
<!-- adjust row class for spacing between slides here -->
<div class="row row-xs no-bottom-gutter align-items-start">
<div role="region" aria-roledescription="carousel" class="{{ namespace }}slider__inner swiper {{ namespace }}scrollToNav__inner" data-js-scroll-to-nav-swiper>
<div class="{{ namespace }}scrollToNav__prev swiper-button-prev"></div>
<div class="{{ namespace }}scrollToNav__next swiper-button-next"></div>
<div class="{{ namespace }}slider__navigation row row-xs justify-content-end w-100">
<div class="col-auto">
<ul class="{{ namespace }}btnGroup">
<li>
{% render "@icon-btn-secondary",{
classes: [namespace + "slider__prev","swiper-button-prev"],
icon: "icon-arrowprevious",
attrs: {
"aria-label": "Previous slide"
}
},true %}
</li>
<li>
{% render "@icon-btn-secondary",{
classes: [namespace + "slider__next","swiper-button-next"],
icon: "icon-arrownext",
attrs: {
"aria-label": "Next slide"
}
},true %}
</li>
</ul>
</div>
</div>
<!-- Additional required wrapper -->
<!-- adjust row class for spacing between slides here -->
<ul class="{{ namespace }}scrollToNav__innerWrapper swiper-wrapper list-unstyled row row-xs align-items-stretch-immediate no-bottom-gutter flex-nowrap">
{% for key, item in items %}
{% if item %}
<li aria-roledescription="slide" class="swiper-slide col">
<div class="{{ namespace }}scrollToNav__item">
{% render "@tile-navigation", {
eltType: "a",
href: "#test",
modifiers: navItemClasses,
icon: item.icon,
text: item.text,
attrs: {
"data-js-scroll-nav-interactable-item": ""
},
classes: ["-noInteraction"]
},true %}
</div>
</li>
{% endif %}
{% endfor %}
</ul>
</div>
</div>
<div class="{{ namespace }}scrollToNav__fakeInteraction" aria-hidden="true"></div>
</div>
import Swiper from "swiper";
import {A11y, Keyboard, Navigation} from "swiper/modules";
export default class ScrollToNav {
constructor() {
this.scrollToNav = document.querySelectorAll("[data-js-scroll-to-nav]");
this.initScrollToNav();
}
initScrollToNav() {
function placeFakeShadow(element, offset ,event) {
let left = event.currentTarget.closest("LI").getBoundingClientRect().x;
let top = event.currentTarget.closest("LI").getBoundingClientRect().y;
let gridOffset = parseInt(getComputedStyle(event.currentTarget.closest("[data-js-scroll-to-nav]")).getPropertyValue('--scroll-to-nav-inset-spacing-inline'), 10);
element.classList.add("-isActive");
element.style.left = `${left + gridOffset}px`;
element.style.top = `${top}px`;
element.style.width = event.currentTarget.clientWidth + "px";
element.style.height = event.currentTarget.clientHeight + "px";
}
Array.prototype.forEach.call(this.scrollToNav, (elt) => {
let offset = getComputedStyle(elt).getPropertyValue('--scroll-to-nav-inset-spacing-inline');
let fakeShadow = elt.querySelector(".sds-scrollToNav__fakeInteraction") ? elt.querySelector(".sds-scrollToNav__fakeInteraction") : "";
let inner = elt.querySelector(".sds-scrollToNav__innerWrapper");
elt.addEventListener("mousedown", (e) => {
if(fakeShadow) {
fakeShadow.classList.remove("-isActive")
}
})
if(fakeShadow) {
elt.querySelectorAll("[data-js-scroll-nav-interactable-item]").forEach((el, i) => {
el.addEventListener("mousemove", (e) => placeFakeShadow(fakeShadow, offset, e), false);
// el.addEventListener("focus", (e) => placeFakeShadow(fakeShadow, offset, e), false);
el.addEventListener("mouseleave", (e) => {
fakeShadow.classList.remove("-isActive");
});
el.addEventListener("click", (e) => {
fakeShadow.classList.remove("-isActive");
});
});
}
const scrollNavSwiper = elt.querySelector("[data-js-scroll-to-nav-swiper]");
const swiperInstance = new Swiper(scrollNavSwiper, {
// needed functionalities
modules: [A11y, Keyboard, Navigation],
// Optional parameters
direction: 'horizontal',
keyboard: true,
slidesPerView: "auto",
watchOverflow: true,
// Accessibility parameters
a11y: {
slideLabelMessage: null,
slideRole: null
},
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
on: {
sliderMove: function () {
if(fakeShadow) {
fakeShadow.classList.remove("-isActive");
}
elt.classList.add("-noInteraction");
},
transitionEnd: function () {
elt.classList.remove("-noInteraction");
}
}
});
});
}
}
@use "sass:math";
/* variables specific to current element */
.#{$namespace}scrollToNav {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
--scroll-to-nav-inset-spacing-inline: #{map-deep-get($token-spacer-inset-map, "sm")};
position: relative;
z-index: z("zero");
/* Pseudo Elements */
/*
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 */
&__outerWrapper {
margin-top: -($scroll-to-nav-top-space-global);
}
&__inner {
padding-top: $scroll-to-nav-top-space-global;
padding-bottom: $scroll-to-nav-top-space-global;
margin-top: -($scroll-to-nav-top-space-global);
margin-bottom: -($scroll-to-nav-top-space-global);
}
&__innerWrapper#{$self}__innerWrapper {
}
&__prev,
&__next {
position: absolute;
z-index: z("low");
border-radius: 0;
transition: opacity 0.2s linear;
pointer-events: none;
top: 0;
bottom: math.div($scroll-to-nav-top-space-global,2);
background-size: 100%;
background-repeat: no-repeat;
opacity: 1;
width: map-deep-get($token-sizes-unit-map, "80");
@include gradient-directional-custom-prop("comp-shader-background-color", "comp-section-background-color", 0, 100%, -90deg, true);
&[aria-disabled="true"] {
opacity: 0;
}
&:hover {
@media (hover: hover) {
opacity: 0;
}
}
}
&__prev {
left: 0;
}
&__next {
right: 0;
transform: rotate(180deg);
}
// scrollToNav__item
&__item {
// follows same logic as parent
position: relative;
z-index: z("zero");
border-radius: map-deep-get($token-radius-map, "16");
width: 136px;
max-width: 100%;
min-width: 100%;
box-shadow: map-deep-get($token-shadow-map, "active");
display: flex;
align-items: stretch;
> * {
flex-grow: 1;
}
@include media-breakpoint-up("lg") {
width: 220px;
}
}
&__fakeInteraction {
@media (hover: hover) {
position: fixed;
z-index: z("medium");
top: $scroll-to-nav-top-space-global;
visibility: hidden;
box-shadow: map-deep-get($token-shadow-map, "detail");
opacity: 0;
border-radius: map-deep-get($token-radius-map, "16");
pointer-events: none;
transition: opacity 0s linear;
&.-isActive {
opacity: 1;
visibility: visible;
transition: opacity 0.15s linear;
}
}
}
&.-noInteraction {
pointer-events: none;
}
&.-itemsAutoWidth {
#{$self}__item {
width: auto;
}
}
&.-itemsAutoWidthGrow {
#{$self}__inner {
width: 100%;
}
#{$self}__innerWrapper [class*="col"] {
min-width: 136px;
max-width: 320px;
flex-grow: 1;
}
&.-justifyCenter {
[class*="col"] {
&:first-of-type {
margin-left: auto;
}
&:last-of-type {
margin-right: auto;
}
}
}
}
&.-itemsAutoWidthGrow,
&.-itemsAutoWidthCustomXl {
#{$self}__inner {
width: 100%;
}
#{$self}__innerWrapper [class*="col"] {
&:first-of-type {
margin-left: auto;
}
&:last-of-type {
margin-right: auto;
}
min-width: 136px;
max-width: 320px;
flex-grow: 1;
}
}
/* modifiers */
// scrollToNav -isScrolled
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}