There are no ACF fields assigned to this component.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.block-content-slider {
padding-top: clamp(40px, 8vw, 140px);
padding-bottom: clamp(40px, 8vw, 140px);
@include bp($xl, true) {
padding-left: 1rem;
}
.swiper{
overflow: visible;
}
&__heading-wrap {
padding-bottom: 3rem;
@include bp($md, true) {
padding-bottom: 1rem;
}
}
&__heading{
*{
margin: 0;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
color: var(--primary);
font-size: clamp(24px, 3vw, 44px);
}
}
&__left{
background: var(--white);
z-index: 3;
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
@include bp($lg){
margin-bottom: 0;
flex-direction: column;
align-items: flex-start;
}
&::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: -100%;
top: 0;
background: var(--white);
}
}
&__slide{
border-radius: 32px;
overflow: hidden;
position: relative;
padding: 20px;
height: rem-calc(400);
display: block;
text-decoration: none;
@include bp($md){
border-radius: 52px;
padding: 28px;
}
&:hover,
&:focus {
.block-content-slider__slide-back{
bottom: 0;
transition: .45s ease-in-out;
}
.block-content-slider__slide-title {
color: var(--primary);
}
}
&-image-container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 0;
display: flex;
&::before{
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: linear-gradient(0, var(--primary), transparent);
z-index: 0;
}
img, picture{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&-front{
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
height: 100%;
.pill {
background-color: var(--white);
color: var(--primary);
}
}
&-title{
color: var(--white);
@include fluid-type(18, 24);
font-weight: 600;
transition: color .3s ease-in-out;
/* clamp to 4 lines */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
&-back{
padding: 20px;
z-index: 2;
transition: .45s ease-in-out;
position: absolute;
left: 0;
right: 0;
bottom: -128%;
height: calc(100% - 40px);
width: auto;
background-color: var(--secondary);
@include bp($md){
padding: 28px;
height: calc(100% - 56px);
}
.author-name {
color: var(--primary);
}
}
&-details{
height: 88%;
overflow: auto;
}
&-description{
margin-top: 1rem;
margin-bottom: 2rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
*{
color: var(--primary);
}
}
&-link{
width: 40px;
height: 40px;
border: solid var(--white) 1px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
transition: .3s ease-in-out;
float: right;
cursor: pointer;
&:hover{
background-color: var(--white);
.ico--arrow-right{
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");
}
}
.ico{
width: 20px;
height: 20px;
&--arrow-right{
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");
}
}
}
&-back &-link {
border-color: var(--primary);
.ico--arrow-right {
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");
}
}
}
&__navigation-container{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
justify-content: flex-end;
@include bp($md, true) {
justify-content: flex-start;
padding-top: 1rem;
}
}
&__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;
/* if it doesn't have an aria-label, it will be hidden */
&:not([aria-label]){
display: none;
}
&-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-content-slider__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-content-slider__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-content-slider__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-content-slider__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-content-slider__navigation-btn{
&:hover{
background-color: var(--text-color);
&.block-content-slider__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-content-slider__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;
}
}
}
}
.swiper-slide {
transition: all 0.3s ease-in-out;
}
.swiper-slide-active {
@include bp($lg) {
width: calc((1300px * 0.4)) !important;
}
}
.author {
color: var(--white);
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
&-avatar img {
border-radius: 50%;
width: 40px;
height: 40px;
}
}
&--blue-variant {
.block-content-slider__slide{
&-back{
background-color: var(--accentBlue);
--text-color: var(--white);
.author-name {
color: var(--white);
}
.block-content-slider__slide-link {
border-color: var(--white);
.ico--arrow-right {
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");
}
&:hover {
.ico--arrow-right {
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 {
.block-content-slider__slide {
&-title,
&-description {
color: var(--white) !important;
}
}
.pill {
color: var(--white);
}
}
}
.block-content-slider__navigation-btn{
border-color: var(--primary);
}
}
&__button-row {
padding-top: 1rem;
}
}
class FeaturesSlider {
/**
* 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-content-slider');
this.init();
}
/**
* Example function to run class logic
* Can access `this.block`
*/
init() {
this.blocks.forEach((block) => {
const carousel = block.querySelector('.block-content-slider__right');
const nextBtn = block.querySelector('.block-content-slider__navigation-btn-next');
const prevBtn = block.querySelector('.block-content-slider__navigation-btn-prev');
const totalSlides = block.querySelectorAll('.swiper-slide');
if(carousel){
const swiper = new Swiper(carousel, {
loop: false,
slidesPerView: 1.25,
autoHeight: true,
spaceBetween: 24,
navigation: totalSlides.length > 1 ? {
nextEl: nextBtn,
prevEl: prevBtn,
} : false,
breakpoints: {
767:{
slidesPerView: 2,
navigation: totalSlides.length > 2 ? {
nextEl: nextBtn,
prevEl: prevBtn,
} : false,
},
1023:{
slidesPerView: 3,
navigation: totalSlides.length > 3 ? {
nextEl: nextBtn,
prevEl: prevBtn,
} : false,
},
}
});
}
});
}
}
document.addEventListener('DOMContentLoaded', () => {
new FeaturesSlider();
});
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "strategiq/content-slider",
"title": "Content Slider",
"description": "Example block to be used as a template",
"category": "strategiq",
"icon": "strategiq",
"acf": {
"mode": "preview",
"renderTemplate": "block-content-slider.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/content-slider/block-content-slider.css", "swiper"],
"viewScript": ["content-slider", "swiper"]
}
Page Title
Page Type
Page URL
Carbon and Climate Change
page
Modern Slavery & Human Rights Consultancy
page
Sustainability Training Programmes
page
Sustainable Procurement & Supply Chain Management
page
Sustainability E-learning Services
page
Sustainability Strategy & Policy
page
There are is no readme file with this component.