Testimonial Slider

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&#39;études garanti par l&#39;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&#39;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>
  • Content:
    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
    				}
    
    			});
    
    
    
    		})
    
    	}
    
    }
    
  • URL: /components/raw/spk-testimonial-slider/TestimonialSlider.js
  • Filesystem Path: components/spuerkeess-site/organisms/testimonial-slider/TestimonialSlider.js
  • Size: 1 KB
  • Content:
    /* 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 {
    	}
    
    }
  • URL: /components/raw/spk-testimonial-slider/_testimonial-slider.scss
  • Filesystem Path: components/spuerkeess-site/organisms/testimonial-slider/_testimonial-slider.scss
  • Size: 4.3 KB