No notes defined.
<div class="sds-testimonialSlider container" data-swiper-testimonials>
<nav class="sds-testimonialSlider__nav swiper" data-swiper-testimonials-thumbs>
<ul class="sds-testimonialSlider__controls swiper-wrapper">
<li class="w-auto swiper-slide">
<button class="sds-box -elevated sds-testimonialSlider__control" type="button">
<div class="sds-noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity=".32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M420.419 315.304c0-58.22-47.196-105.416-105.416-105.416s-105.417 47.196-105.417 105.416 47.197 105.417 105.417 105.417 105.416-47.197 105.416-105.417Zm-191.666 0c0-47.634 38.615-86.25 86.25-86.25 47.634 0 86.25 38.616 86.25 86.25 0 47.635-38.616 86.25-86.25 86.25-47.635 0-86.25-38.615-86.25-86.25Zm76.666-28.75c0 7.939-6.436 14.375-14.375 14.375s-14.375-6.436-14.375-14.375 6.436-14.375 14.375-14.375 14.375 6.436 14.375 14.375Zm-24.772 39.261c-2.134-4.843-7.791-7.039-12.634-4.905-4.843 2.134-7.039 7.791-4.905 12.634 8.886 20.164 28.639 34.469 51.895 34.469 23.255 0 43.008-14.305 51.894-34.469a9.582 9.582 0 0 0-4.905-12.634c-4.843-2.134-10.5.062-12.634 4.905-6.064 13.761-19.278 23.031-34.355 23.031-15.078 0-28.292-9.27-34.356-23.031Zm72.689-39.261c0 7.939-6.436 14.375-14.375 14.375s-14.375-6.436-14.375-14.375 6.436-14.375 14.375-14.375 14.375 6.436 14.375 14.375Z" fill="#4D6E90" />
</g>
</svg>
</div>
</button>
</li>
<li class="w-auto swiper-slide">
<button class="sds-box -elevated sds-testimonialSlider__control" type="button">
<img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-student-male.jpg" class="sds-testimonialSlider__controlImg img-fluid" alt="">
</button>
</li>
<li class="w-auto swiper-slide">
<button class="sds-box -elevated sds-testimonialSlider__control" type="button">
<img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-woman.png" class="sds-testimonialSlider__controlImg img-fluid" alt="">
</button>
</li>
</ul>
</nav>
<div class="sds-testimonialSlider__inner sds-slider__inner swiper" data-swiper-testimonials-slides>
<ul class="swiper-wrapper row align-items-end align-items-md-center flex-nowrap no-bottom-gutter list-unstyled">
<!-- Slides -->
<li class="sds-testimonialSlider__slide swiper-slide col-12">
<div class="sds-testimonialSlider__slideInner">
<div class="sds-testimonialSlider__img">
<div class="sds-noPic">
<svg width="630" height="630" viewBox="0 0 630 630" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="630" height="630" transform="translate(0 0.304688)" fill="#F0F6FF" />
<g opacity=".32">
<path fill-rule="evenodd" clip-rule="evenodd" d="M420.419 315.304c0-58.22-47.196-105.416-105.416-105.416s-105.417 47.196-105.417 105.416 47.197 105.417 105.417 105.417 105.416-47.197 105.416-105.417Zm-191.666 0c0-47.634 38.615-86.25 86.25-86.25 47.634 0 86.25 38.616 86.25 86.25 0 47.635-38.616 86.25-86.25 86.25-47.635 0-86.25-38.615-86.25-86.25Zm76.666-28.75c0 7.939-6.436 14.375-14.375 14.375s-14.375-6.436-14.375-14.375 6.436-14.375 14.375-14.375 14.375 6.436 14.375 14.375Zm-24.772 39.261c-2.134-4.843-7.791-7.039-12.634-4.905-4.843 2.134-7.039 7.791-4.905 12.634 8.886 20.164 28.639 34.469 51.895 34.469 23.255 0 43.008-14.305 51.894-34.469a9.582 9.582 0 0 0-4.905-12.634c-4.843-2.134-10.5.062-12.634 4.905-6.064 13.761-19.278 23.031-34.355 23.031-15.078 0-28.292-9.27-34.356-23.031Zm72.689-39.261c0 7.939-6.436 14.375-14.375 14.375s-14.375-6.436-14.375-14.375 6.436-14.375 14.375-14.375 14.375 6.436 14.375 14.375Z" fill="#4D6E90" />
</g>
</svg>
</div>
</div>
<div class="sds-box -insetLg -elevated sds-stackLg sds-testimonialSlider__slideBox">
<blockquote class="sds-testimonialSlider__textContent">
<p class="sds-testimonialSlider__text h2 sds-headingLight">Grâce au prêt Axxess Study, j’ai emménagé à Cologne sans aide financière de mes parents.</p>
</blockquote>
<cite class="sds-testimonialSlider__meta"><b>Flore, </b>19 ans, étudiante en linguistique</cite>
</div>
</div>
</li>
<li class="sds-testimonialSlider__slide swiper-slide col-12">
<div class="sds-testimonialSlider__slideInner">
<div class="sds-testimonialSlider__img">
<img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-student-male.jpg" alt="">
</div>
<div class="sds-box -insetLg -elevated sds-stackLg sds-testimonialSlider__slideBox">
<blockquote class="sds-testimonialSlider__textContent">
<p class="sds-testimonialSlider__text h2 sds-headingLight">J’ai pu obtenir facilement une avance de fonds en attendant le prêt d'études garanti par l'Etat, afin de payer mon premier loyer.</p>
</blockquote>
<cite class="sds-testimonialSlider__meta"><b>Jorge, </b>20 ans, étudiant en économie et gestion</cite>
</div>
</div>
</li>
<li class="sds-testimonialSlider__slide swiper-slide col-12">
<div class="sds-testimonialSlider__slideInner">
<div class="sds-testimonialSlider__img">
<img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-woman.png" alt="">
</div>
<div class="sds-box -insetLg -elevated sds-stackLg sds-testimonialSlider__slideBox">
<blockquote class="sds-testimonialSlider__textContent">
<p class="sds-testimonialSlider__text h2 sds-headingLight">Quand j’ai commencé mon Master à Londres, le prêt Axxess Study m’a permis de payer les frais d’inscription non couverts par les Aides financières de l'Etat.</p>
</blockquote>
<cite class="sds-testimonialSlider__meta"><b>Carmen, </b>25 ans, étudiante en management</cite>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="{{ namespace }}testimonialSlider container{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" data-swiper-testimonials>
<nav class="{{ namespace }}testimonialSlider__nav swiper" data-swiper-testimonials-thumbs>
<ul class="{{ namespace }}testimonialSlider__controls swiper-wrapper">
{% for key, item in items %}
<li class="w-auto swiper-slide">
<button class="{{ namespace }}box -elevated {{ namespace }}testimonialSlider__control" type="button">
{% if item.nopic %}
{% render "@nopic-smileysatisfied" %}
{% else %}
<img src="{{ (mediaPath + item.img ) | path }}" class="{{ namespace }}testimonialSlider__controlImg img-fluid" alt="">
{% endif %}
</button>
</li>
{% endfor %}
</ul>
</nav>
<div class="{{ namespace }}testimonialSlider__inner {{ namespace }}slider__inner swiper" data-swiper-testimonials-slides>
<ul class="swiper-wrapper row align-items-end align-items-md-center flex-nowrap no-bottom-gutter list-unstyled">
<!-- Slides -->
{% for key, item in items %}
<li class="{{ namespace }}testimonialSlider__slide swiper-slide col-12">
<div class="{{ namespace }}testimonialSlider__slideInner">
<div class="{{ namespace }}testimonialSlider__img">
{% if item.nopic %}
{% render "@nopic-smileysatisfied" %}
{% else %}
<img src="{{ (mediaPath + item.img ) | path }}" alt="">
{% endif %}
</div>
<div class="{{ namespace }}box -insetLg -elevated {{ namespace }}stackLg {{ namespace }}testimonialSlider__slideBox">
<blockquote class="{{ namespace }}testimonialSlider__textContent">
<p class="{{ namespace }}testimonialSlider__text h2 {{ namespace }}headingLight">{{ item.text }}</p>
</blockquote>
<cite class="{{ namespace }}testimonialSlider__meta"><b>{{ item.author }}</b>{{ item.authorInfo }}</cite>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
import Swiper from "swiper";
import {A11y, Keyboard, Thumbs, EffectFade} from "swiper/modules";
export default class TestimonialSlider {
constructor() {
this.fireSwiper();
}
fireSwiper(){
const swiper = document.querySelectorAll("[data-swiper-testimonials]");
swiper.forEach((el, i) => {
let domSliderMain = el.querySelector("[data-swiper-testimonials-slides]")
let domSliderThumbs = el.querySelector("[data-swiper-testimonials-thumbs]")
let thumbs = new Swiper (domSliderThumbs, {
modules: [A11y, Keyboard],
slidesPerView: 'auto',
slideToClickedSlide: true
});
let main = new Swiper(domSliderMain, {
// needed functionalities
modules: [A11y, Keyboard, Thumbs, EffectFade],
// Optional parameters
direction: 'horizontal',
keyboard: true,
slidesPerView: "1",
spaceBetween: "0",
slideActiveClass: "-isActive",
effect: "fade",
fadeEffect: {
crossFade: true
},
thumbs: {
swiper: thumbs
}
});
})
}
}
/* variables specific to current element */
$testimonial-slider-breakpoint: "md";
.#{$namespace}testimonialSlider {
/* Save root element context for easy access if nesting is needed */
$self: &;
/* properties of current element + media queries */
display: flex;
flex-direction: column-reverse;
gap: map-deep-get($token-spacer-stack-max-map, "lg");
@include media-breakpoint-up($testimonial-slider-breakpoint) {
flex-direction: row;
align-items: center;
gap: map-deep-get($token-spacer-unit-map, "64");
}
/* 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 */
// testimonialSlider__inner
&__inner {
overflow: hidden !important;
}
&__textContent {
margin-bottom: 0;
}
&__nav {
flex-shrink: 0;
width: 100%;
@include media-breakpoint-up($testimonial-slider-breakpoint) {
width: auto;
}
}
&__controls {
margin-bottom: 0;
display: flex;
flex-direction: row !important;
gap: map-deep-get($token-spacer-stack-max-map, "md");
@include media-breakpoint-up($testimonial-slider-breakpoint) {
flex-direction: column !important;
}
}
&__control {
// follows same logic as parent
width: map-deep-get($token-sizes-unit-map, "64");
height: map-deep-get($token-sizes-unit-map, "64");
padding: map-deep-get($token-spacer-inset-map, "sm");
border-radius: map-deep-get($token-radius-map, "16");
display: flex;
align-items: center;
justify-content: center;
text-align: center;
outline: $border-width*2 solid transparent !important;
outline-offset: -($border-width*2);
// swiperjs active class because other custom added defined class in options doesn't work
.swiper-slide-thumb-active & {
@include custom-prop-fallback("outline-color", "comp-tile-active-border-color", true, true);
}
}
&__controlImg {
border-radius: map-deep-get($token-radius-map, "circle");
width: map-deep-get($token-sizes-unit-map, "48");
height: map-deep-get($token-sizes-unit-map, "48");
flex-shrink: 0;
IMG {
object-fit: cover;
}
}
&__slide {
width: auto !important;
padding: 0 !important;
&.-isActive {
#{$self}__slideBox,
#{$self}__img {
transform: translate(0,0);
}
}
}
&__slideInner {
display: flex;
align-items: center;
}
&__slideBox {
@include media-breakpoint-up($testimonial-slider-breakpoint) {
margin-top: map-deep-get($token-spacer-unit-map, "64");
margin-left: -(map-deep-get($token-spacer-unit-map, "64"));
transform: translate(0, 50%);
}
@include media-breakpoint-up("lg") {
margin-top: 0;
}
}
&__img {
display: none;
flex-shrink: 0;
border-radius: map-deep-get($token-radius-map, "16");
width: 200px;
height: 200px;
@include media-breakpoint-up($testimonial-slider-breakpoint) {
display: block;
}
@include media-breakpoint-up("lg") {
width: 375px;
height: 375px;
}
IMG {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
}
&__slideBox,
&__img {
transition: 0.15s transform linear;
}
&__textContent {
position: relative;
@include fluid-padding-right($min_width, $max_width, $h1-page-cover-font-size-min*1.35, $h1-page-cover-font-size*1.35, true);
&::before {
content: "“";
position: absolute;
top: -0.1em;
right: 0;
font-family: $headings-font-family;
font-weight: map-deep-get($token-font-weight-map, "semi-bold");
@include fluid-type($min_width, $max_width, $h1-page-cover-font-size-min*2, $h1-page-cover-font-size*2, true);
@include custom-prop-fallback("color", "sys-color-text-highlight-vivid");
line-height: 1;
text-align: right;
}
}
&__meta {
display: block;
@include custom-prop-fallback("color", "sys-color-text-primary-muted");
font-style: normal
}
/* modifiers */
// testimonialSlider -altStyle
&.-altStyle {
// follows same logic as base element
}
/* random parent element */
/*
*
* Syntax : .randomParentElt & {}
*
*/
/* Pseudo Classes */
&:hover {
@media (hover: hover) {
}
}
&:focus {
}
&:active {
}
&:focus,
&:active {
}
}