@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-testimonial-carousel {
@include padding-top(rem-calc(120));
@include padding-bottom(rem-calc(120));
.content-container {
margin-bottom: rem-calc(32);
@include bp($md) {
margin-bottom: rem-calc(60);
}
@include bp($lg) {
margin-bottom: rem-calc(80);
}
}
.swiper {
.swiper-wrapper {
.swiper-slide {
height: auto;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
.testimonial {
@include bp($md) {
justify-content: center;
}
&:has(.testimonial__image) {
align-items: center;
@include bp($lg) {
align-items: flex-end;
}
.testimonial__content {
padding-left: 1.5rem;
text-align: left;
}
.testimonial__quote {
text-wrap: auto;
}
.testimonial__logo {
margin-right: 0;
margin-left: 0;
}
}
&__image {
border-radius: rem-calc(20);
overflow: hidden;
display: flex;
flex-direction: column;
margin-bottom: rem-calc(20);
@include bp($md) {
margin-bottom: 0;
}
}
&__logo {
width: rem-calc(80);
margin-bottom: 1rem;
display: flex;
flex-direction: column;
margin-right: auto;
margin-left: auto;
@include bp($lg) {
width: rem-calc(100);
margin-bottom: 2rem;
}
}
&__content {
padding-top: 0;
text-align: center;
}
&__quote {
@include fluid-type(24, 38);
line-height: 1.2;
}
&__author {
margin-bottom: 0;
opacity: 0.6;
}
}
}
}
}
.swiper-row {
position: relative;
padding-bottom: 3rem;
@include bp(1460px) {
padding-bottom: 0;
}
}
.swiper-controls {
width: rem-calc(130);
max-width: 100vw;
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%, 0, 0);
@include bp(1460px) {
width: calc(100vw - #{rem-calc(12)});
top: 50%;
transform: translate3d(-50%, -50%, 0);
}
.swiper-button-prev,
.swiper-button-next {
width: rem-calc(48);
height: rem-calc(48);
background-color: var(--tertiary);
border-radius: 100%;
padding: 0;
margin: 0;
transform: translateY(-50%);
@include ts(background-color);
@include bp(1460px) {
width: rem-calc(66);
height: rem-calc(66);
}
&:hover {
background-color: var(--primary);
&: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='white'/%3E%3C/svg%3E%0A");
}
}
&: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='black'/%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);
}
}
.swiper-button-prev {
&:after {
transform: translate3d(-50%, -50%, 0) rotate(180deg);
}
}
}
}
class TestimonialCarousel {
/**
* Create and initialise objects of this class
* @param {object} block
*/
constructor(block) {
this.block = block;
setTimeout(() => {
this.init();
}, 100);
}
init() {
this.swiper = new Swiper(this.block.querySelector('.swiper'), {
slidesPerView: 1,
autoHeight: true,
autoplay: {
delay: 5000,
disableOnInteraction: true,
},
breakpoints: {
0: {
autoplay: false,
},
1200: {
autoplay: {
delay: 5000,
disableOnInteraction: true,
},
},
},
on: {
breakpoint(swiper, breakpointParams) {
breakpointParams.autoplay
? swiper.autoplay.start()
: swiper.autoplay.stop();
},
},
navigation: {
nextEl: this.block.querySelector('.swiper-button-next'),
prevEl: this.block.querySelector('.swiper-button-prev'),
},
});
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.block-testimonial-carousel').forEach( block => new TestimonialCarousel(block) );
});{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/testimonial-carousel",
"title": "Testimonial carousel",
"description": "Testimonial carousel block",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-testimonial-carousel.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": false,
"text": false,
"gradients": false
},
"spacing": {
"padding": [
"top",
"bottom"
],
"margin": [
"top",
"bottom"
]
}
},
"example": {
"attributes": {
"mode": "preview",
"data": {
"heading_type": "h2",
"heading_text": "Example - Example",
"content": "This is some example content to represent what the content will look like"
}
}
},
"style": "file:../../assets/css/testimonial-carousel/block-testimonial-carousel.css"
}