Case Study Carousel

View example

The Piece Hall

View Case Study

Delivering exceptional design and flawless functionality

TOTUM: More sign-ups, less spend

View Case Study

50%

increase in PPC conversion value

61%

increase in paid social ROAS

Dental Law

View Case Study

44%

increase in accepted cases

54%

increase in organic conversions

120%

increase in leads from social

The Inn Collection Group

View Case Study

87%

Increase in conversions

166%

Increase in clicks (265,300)

21.9%

Increase in new users

10.3

ROAS

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-case-study-carousel {
	--text-color: #{$black};

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

	overflow: hidden;
	margin-left: rem-calc(-8);
	margin-right: rem-calc(-8);
	padding-left: rem-calc(8);
	padding-right: rem-calc(8);

	&__logo {
		width: rem-calc(96);
		height: rem-calc(96);
		background-color: $white;
		display: block;
		margin: 0 auto;
		border-radius: rem-calc(16);
		margin-bottom: rem-calc(30);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 1rem;
    	overflow: hidden;

		@include bp($xl) {
			margin-bottom: rem-calc(50);
		}

		picture {
			display: flex;
			flex-direction: column;
		}
	}

	&__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) {
			background-color: $black;
			max-height: 100dvh;
			flex-direction: row;
			padding: rem-calc(8);
			aspect-ratio: 16/9;
			height: auto;
			justify-content: flex-end;
			align-items: center;
		}

		.btn--hollow {
			@include bp($xl) {
				--arrow: url("data:image/svg+xml,%3Csvg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.695312 4.33333C0.327123 4.33333 0.0286458 4.63181 0.0286458 5C0.0286458 5.36819 0.327123 5.66667 0.695312 5.66667V5V4.33333ZM18.1667 5.4714C18.4271 5.21105 18.4271 4.78895 18.1667 4.5286L13.9241 0.285954C13.6637 0.0256052 13.2416 0.0256052 12.9813 0.285954C12.7209 0.546304 12.7209 0.968414 12.9813 1.22876L16.7525 5L12.9813 8.77124C12.7209 9.03159 12.7209 9.4537 12.9813 9.71405C13.2416 9.97439 13.6637 9.97439 13.9241 9.71405L18.1667 5.4714ZM0.695312 5V5.66667H17.6953V5V4.33333H0.695312V5Z' fill='white'/%3E%3C/svg%3E%0A");
			}
		}
	}

	&__item-statistics-item {
		display: flex;
		flex-direction: column;
	}

	&__item-statistics-item-figure {
		margin-bottom: rem-calc(5);
	}

	&__item-statistics-item-text {
		margin-bottom: rem-calc(5);
		font-size: clamp(rem-calc(16), 2vw, rem-calc(26));
	}

	&__item-title {
		margin-bottom: rem-calc(15);

		@include bp($xl) {
			margin-bottom: rem-calc(30);
		}
	}

	&__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 {
		position: relative;
		z-index: 2;
		width: 100%;
		height: 100%;
		padding: rem-calc(30 30 20 30);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: rem-calc(40);

		@include bp($xl) {
			gap: rem-calc(50);
		}
	}

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

		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba($black, 0.5);
			display: none;

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

		@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 CaseStudyCarousel {
	/**
	 * 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,
			loop: true,
			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,
			},
			breakpoints: {
				1200: {
					autoHeight: false,
				},
			},
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	document.querySelectorAll('.block-case-study-carousel').forEach(
		block => new CaseStudyCarousel(block)
	);
});

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

Page Title

Page Type

Page URL

TikTok Advertising

page

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

Affiliate Programme Management

page

https://embryo.com/affiliate-marketing/affiliate-programme-management/

E-commerce SEO

page

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