Image Testimonial Carousel

"Embryo were amazing to work with and delivered some incredible results for the brand. The team are so easy to work with and couldn’t do enough for us!"

Sophie Rigg, I SAW IT FIRST

"A top digital agency. I was very impressed with their pitch, and I’m just as impressed with their delivery."

Nick Zapolski, ChooseMyCar

Fields
PHP
SCSS
JavaScript
Pages
JSON
Notes

There are no ACF fields assigned to this component.

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-image-testimonial-carousel {
	overflow: hidden;
	margin-left: rem-calc(-8);
	margin-right: rem-calc(-8);
	padding-left: rem-calc(8);
	padding-right: rem-calc(8);

	&__item {
		width: 100%;
		aspect-ratio: auto;
		background-color: $black;
		position: relative;
		overflow: hidden;
		display: flex;
		align-items: flex-end;
		justify-content: flex-start;
		flex-direction: column;
		background-color: $grey-primary;
		height: 100%;

		@include bp($xl) {
			max-height: 100dvh;
			flex-direction: row;
			padding: rem-calc(8);
			aspect-ratio: 16/9;
			height: auto;
			justify-content: flex-end;
		}
	}

	&__item-content-quote-wrapper {
		position: relative;
		z-index: 2;
		width: 100%;
		border-radius: 0 0 rem-calc(13) rem-calc(13);
		z-index: 2;
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		padding: rem-calc(20);
		border: rem-calc(1) solid rgba($white, 0.2);
		background-color: $grey-primary;

		@include bp($xl) {
			width: 60%;
			padding: rem-calc(30);
			background-color: rgba($black, 0.1);
			border-radius: rem-calc(13);
		}

		@include bp($xxl) {
			width: 50%;
		}
	}

	&__item-content-text-author {
		margin-top: rem-calc(26);
	}

	&__item-content-text-author {
		p {
			color: $black;

			@include bp($xl) {
				color: $white;
			}
		}
	}

	&__item-content-text-quote {
		color: $black;
		font-size: clamp(rem-calc(24), 3vw, rem-calc(40));
		letter-spacing: -1.6px;
		line-height: 1.2;
		font-weight: 600;
		max-width: rem-calc(900);

		@include bp($xl) {
			color: $white;
		}

		p {
			color: $black;
			@include fluid-type(24, 40);
			letter-spacing: -1.6px;
			line-height: 1.2;
			font-weight: 600;

			@include bp($xl) {
				color: $white;
			}
		}
	}

	&__item-image {
		position: relative;
		aspect-ratio: 16/9;
		width: 100%;

		@include bp($xl) {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			aspect-ratio: auto;
			width: auto;
		}

		img {
			display: block;
		}
	}

	.swiper-pagination {
		position: relative;
		margin-top: rem-calc(20);

		@include bp($xl) {
			display: none;
		}
	}

	.swiper-pagination-bullet {
		opacity: 1;
		background-color: $grey-primary;
	}

	.swiper-pagination-bullet-active {
		background-color: $tertiary;
	}

	.swiper {
		overflow: visible;
	}

	.swiper-slide {
		height: auto;

		* {
			box-sizing: border-box;
		}
	}

	.swiper-button-prev,
	.swiper-button-next {
		width: rem-calc(48);
		height: rem-calc(48);
		border-radius: 100%;
		border: rem-calc(1) solid $white;
		padding: 0;
		margin: 0;
		transform: translateY(-50%);
		@include ts(background-color);
		display: none;

		@include bp($xl) {
			width: rem-calc(66);
			height: rem-calc(66);
			display: block;
		}

		&:after {
			width: rem-calc(28);
			height: rem-calc(16);
			content: '';
			background-image: url("data:image/svg+xml,%3Csvg width='28' height='16' viewBox='0 0 28 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.44531 7.20117C0.893028 7.20117 0.445312 7.64889 0.445312 8.20117C0.445312 8.75346 0.893028 9.20117 1.44531 9.20117V8.20117V7.20117ZM27.6524 8.90828C28.0429 8.51775 28.0429 7.88459 27.6524 7.49407L21.2885 1.1301C20.8979 0.73958 20.2648 0.73958 19.8742 1.1301C19.4837 1.52063 19.4837 2.15379 19.8742 2.54432L25.5311 8.20117L19.8742 13.858C19.4837 14.2486 19.4837 14.8817 19.8742 15.2722C20.2648 15.6628 20.8979 15.6628 21.2885 15.2722L27.6524 8.90828ZM1.44531 8.20117V9.20117H26.9453V8.20117V7.20117H1.44531V8.20117Z' fill='white'/%3E%3C/svg%3E%0A");
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: center;
			transform-origin: center;
			@include ts(background-image);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate3d(-50%, -50%, 0);
		}

		&:hover {
			background-color: $white;

			&:after {
				background-image: url("data:image/svg+xml,%3Csvg width='28' height='16' viewBox='0 0 28 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.44531 7.20117C0.893028 7.20117 0.445312 7.64889 0.445312 8.20117C0.445312 8.75346 0.893028 9.20117 1.44531 9.20117V8.20117V7.20117ZM27.6524 8.90828C28.0429 8.51775 28.0429 7.88459 27.6524 7.49407L21.2885 1.1301C20.8979 0.73958 20.2648 0.73958 19.8742 1.1301C19.4837 1.52063 19.4837 2.15379 19.8742 2.54432L25.5311 8.20117L19.8742 13.858C19.4837 14.2486 19.4837 14.8817 19.8742 15.2722C20.2648 15.6628 20.8979 15.6628 21.2885 15.2722L27.6524 8.90828ZM1.44531 8.20117V9.20117H26.9453V8.20117V7.20117H1.44531V8.20117Z' fill='black'/%3E%3C/svg%3E%0A");
			}
		}
	}

	.swiper-button-next {
		right: rem-calc(20);
	}

	.swiper-button-prev {
		left: rem-calc(20);

		&:after {
			transform: translate3d(-50%, -50%, 0) rotate(180deg);
		}
	}

}

class ImageTestimonialCarousel {
	/**
	 * Create and initialise objects of this class
	 * @param {object} block
	 */
	constructor(block) {
		this.block = block;
		this.init();
	}

	init() {
		this.swiper = new Swiper(this.block.querySelector('.swiper'), {
			slidesPerView: 1,
			spaceBetween: 24,
			speed: 1000,
			autoHeight: true,
			navigation: {
				nextEl: this.block.querySelector('.swiper-button-next'),
				prevEl: this.block.querySelector('.swiper-button-prev'),
			},
			pagination: {
				el: this.block.querySelector('.swiper-pagination'),
				clickable: true,
			},
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-image-testimonial-carousel').forEach( block => new ImageTestimonialCarousel(block) );
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/image-testimonial-carousel",
    "title": "Image testimonial carousel",
    "description": "Image testimonial carousel block",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "edit",
        "renderTemplate": "block-image-testimonial-carousel.php"
    },
    "supports": {
        "anchor": true,
        "align": false,
        "color": {
            "background": false,
            "text": false,
            "gradients": false
        },
        "spacing": {
            "margin": [
                "top",
                "bottom"
            ]
        }
    },
    "style": "file:../../assets/css/image-testimonial-carousel/block-image-testimonial-carousel.css"
}

Page Title

Page Type

Page URL

TikTok Advertising

page

https://embryo.com/paid-social/paid-social-tiktok-agency/

E-commerce SEO

page

https://embryo.com/seo/ecommerce-seo/

Google Shopping

page

https://embryo.com/ppc/google-shopping/