Content Slider

View example

Integrated solutions

Carbon Calculators

shutterstock_bloomberg-building-sml-1-2000×1000

Sustainability Hubs

Sustainability E-learning Services

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";

.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

https://www.actionsustainability.com/solutions/consultancy/energy-and-carbon/

Sustainability Tool

page

https://www.actionsustainability.com/solutions/measurement/tools/

Construction

page

https://www.actionsustainability.com/sectors/construction/