@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-team-carousel {
padding: 4rem 0;
&__wrapper{
overflow: visible;
}
&__cta-container{
display: flex;
align-items: center;
justify-content: center;
margin-top: 4rem;
.btn{
font-weight: 700;
}
}
&__navigation-container{
display: flex;
flex-direction: row;
align-items: flex-end;
gap: 8px;
justify-content: flex-end;
margin-bottom: 2rem;
}
&__navigation-btn{
width: 44px;
height: 44px;
border-radius: 100px;
border: solid 1px var(--text-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .3s ease-in-out;
background-position: center;
background-repeat: no-repeat;
background-size: 24px;
&-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23383551'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
}
&-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A");
}
&:hover{
background-color: var(--text-color);
&.block-team-carousel__navigation-btn-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
}
&.block-team-carousel__navigation-btn-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A") ;
}
}
}
&.has-primary-background-color, &.has-secondary-background-color{
.block-team-carousel__navigation-btn-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23fff'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
}
.block-team-carousel__navigation-btn-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23fff'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23fff'/%3E%3C/svg%3E%0A");
}
.block-team-carousel__navigation-btn{
&:hover{
background-color: var(--text-color);
&.block-team-carousel__navigation-btn-prev{
background-image: url("data:image/svg+xml,%3Csvg width='27' height='18' viewBox='0 0 27 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.16895 16.7598L0.768945 8.75977L7.16895 0.759765' stroke='%23383551'/%3E%3Cpath d='M0.768555 8.75977L26.7686 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A") !important;
}
&.block-team-carousel__navigation-btn-next{
background-image: url("data:image/svg+xml,%3Csvg width='28' height='18' viewBox='0 0 28 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.3682 16.7598L26.7682 8.75977L20.3682 0.759765' stroke='%23383551'/%3E%3Cpath d='M26.7686 8.75977L0.768555 8.75977' stroke='%23383551'/%3E%3C/svg%3E%0A") !important;
}
}
}
}
}
class TeamCarousel {
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor() {
this.blocks = document.querySelectorAll('.block-team-carousel');
this.init();
}
/**
* Example function to run class logic
* Can access `this.block`
*/
init() {
this.blocks.forEach((block) => {
const teamCarousel = block.querySelector('.block-team-carousel__wrapper');
const nextBtn = block.querySelector('.block-team-carousel__navigation-btn-next');
const prevBtn = block.querySelector('.block-team-carousel__navigation-btn-prev');
if(teamCarousel){
const swiper = new Swiper(teamCarousel, {
slidesPerView: 1.2,
spaceBetween: 24,
breakpoints: {
767: {
slidesPerView: 3
},
1024: {
slidesPerView: 4
}
},
navigation: {
nextEl: nextBtn,
prevEl: prevBtn,
},
});
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
new TeamCarousel();
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/team-carousel",
"title": "Team Carousel",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-team-carousel.php"
},
"supports": {
"anchor": true,
"align": false,
"color": {
"background": true,
"text": false,
"gradients": true
},
"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/team-carousel/block-team-carousel.css",
"swiper"
],
"viewScript": ["team-carousel", "swiper", "a11y-dialog"]
}