Stats Slider

View example

Construction Industry's Environmental Impact

15% Embodied carbon in construction is responsible for 15% of global greenhouse gas emissions. (Source: ACAN)
350 The UK's Environmental Agency responds to ~350 serious pollution incidents annually from construction. (Source: Environment Agency)
36% Buildings in Europe contribute to 36% of CO2 emissions, including operational and embodied carbon. (Source: WorldGBC)
80% Roughly 80% of buildings standing today will still be around in 2050. (Source: Euro Cities)
68% it’s estimated 68% of the global population will live in cities. (Source: United Nations)

Fields
PHP
SCSS
JavaScript
Pages
JSON
Notes

Field

Field Type

Field Name

Instructions

Content

tab

Heading Type

select

heading_type

Heading Text

textarea

heading_text

Stats

repeater

stats

-- Value

text

value

-- Caption

textarea

caption

Image

image

Settings

tab

Separator Colour

select

separator_colour

Enable Gradient

true_false

enable_gradient

@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";

.block-stats-slider {
	padding-top: clamp(40px, 8vw, 140px);

	.container{
		padding-bottom: clamp(40px, 8vw, 140px);
	}

	.swiper {
		overflow: visible;
	}

	&__head{
		margin-bottom: 4rem;

		@include bp($md, true) {
			margin-bottom: 2rem;
		}
	}

	&__heading{
		*{
			@include fluid-type(24, 44);
			font-weight: 600;
			color: var(--text-color);
			margin-bottom: 0;
		}
	}

	&__body{
		overflow: visible;
	}

	&__stat{
		padding-left: 1.5rem;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 8px;
			width: auto;

			span{
				display: block;
			}

			&::before{
				content: '';
				position: absolute;
				left: 0;
				top: 0;
				width: 4px;
				height: 100%;
				// border-radius: 100px;
				background: var(--secondary);
			}

			&.separator{
				&-orange{
					&::before{
						background: var(--secondary);
					}
				}

				&-purple{
					&::before{
						background: var(--primary);
					}
				}

				&-blue{
					&::before{
						background: var(--accentBlue);
					}
				}
			}
	}

	&__image{
		width: 100%;
		height: 56vh;
		display: flex;
		position: relative;

		@include bp($md){
			height: 80vh;
		}

		&.gradient-enabled{
			margin-top: -200px;

			&::before{
				content: '';
				width: 100%;
				height: 40%;
				position: absolute;
				left: 0;
				top: 0;
				background: linear-gradient(180deg, var(--background-color), transparent);

				@include bp($md){
					height: 50%;
				}
			}
		}

		img, picture{
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}
	}

	&__stats{
		padding: 0;
		margin: 0;

		li{
			list-style: none;
		}
	}

	&__value{
		@include fluid-type(30, 74);
		font-weight: 700;
		color: var(--text-color);
	}

	&__caption{
		@include fluid-type(12, 22);
		font-weight: 400;
		color: var(--text-color);
	}

	&__navigation-container{
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 8px;
		justify-content: flex-start;
		margin-top: 2rem;

		@include bp($lg){
			margin-top: 0;
			justify-content: flex-end;
			position: absolute;
			bottom: -4rem;
		}
	}

	&__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-stats-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-stats-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-stats-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-stats-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-stats-slider__navigation-btn{
			&:hover{
				background-color: var(--text-color);

				&.block-stats-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-stats-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;
				}
			}
		}
	}

	&.has-secondary-background-color{
		--secondary: var(--white);
	}

	&.has-tertiary-background-color{
		--text-color: var(--primary);
	}
}

class StatsSlider {
	/**
	 * 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-stats-slider');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {
			const statsCarousel = block.querySelector('.block-stats-slider__body');
			const nextEl = block.querySelector('.block-stats-slider__navigation-btn-next');
			const prevEl = block.querySelector('.block-stats-slider__navigation-btn-prev');
			const totalSlides = statsCarousel.querySelectorAll('.swiper-slide').length;
			// console.log(totalSlides);

			if(statsCarousel){
				const swiper = new Swiper(statsCarousel, {
					loop: false,
					navigation: (totalSlides > 2 ? {
						nextEl: nextEl,
						prevEl: prevEl,
					} : false),
					slidesPerView: 2,
					spaceBetween: 16,
					breakpoints: {
						414: {
							slidesPerView: 2,
							spaceBetween: 16,
						},
						640: {
							slidesPerView: 2,
							spaceBetween: 16,
						},
						768: {
							slidesPerView: 2,
							spaceBetween: 16,
						},
						1024: {
							slidesPerView: 3,
							spaceBetween: 16,
							navigation: (totalSlides > 3 ? {
								nextEl: nextEl,
								prevEl: prevEl,
							} : false),
						},
					},
				});
			}
		});
	}
}

document.addEventListener('DOMContentLoaded', () => {
	new StatsSlider();
});

{
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 2,
    "name": "strategiq/stats-slider",
    "title": "Stats Slider",
    "description": "",
    "category": "strategiq",
    "icon": "strategiq",
    "acf": {
        "mode": "preview",
        "renderTemplate": "block-stats-slider.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": "Stats Slider",
                "content": "This is some example content to represent what the content will look like"
            }
        }
    },
    "style": ["file:../../assets/css/stats-slider/block-stats-slider.css", "swiper"],
    "viewScript": ["stats-slider", "swiper"]
}

Page Title

Page Type

Page URL

Construction

page

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

Sustainability Consultancy

page

https://www.actionsustainability.com/solutions/consultancy/

Supplier Development Training Programmes

page

https://www.actionsustainability.com/solutions/learning-development/supplier-development-programme/