Full Screen Carousel

The art of good business

Our lawyers are dedicated to delivering our clients the best legal advice. Simply put, we solve problems, manage risk and always seek to add value.

B P Collins is a multi-award winning firm that offers high-quality legal advice for individuals, families and businesses. With 50+ years of experience and extensive knowledge, many of our practice groups maintain a top-tier ranking in legal directories.

We work closely with you to understand your aims and objectives and the challenges you face building a relationship that consistently delivers the right results throughout every stage of the business cycle.

Start-ups and Entrepreneurs

Spark, ambition and a sense of independence. We embrace the spirit of entrepreneurs. From setting out key terms of employment and structuring your business, to protecting your intellectual property and negotiating a good deal on a property lease – our job is to help mitigate risks and put the building blocks in place to grow your idea.

Need help with:

Terms of employment Structuring your business Protecting your intellectual property Property lease

Developing Potential

Taking your business to the next step can be challenging. More staff means more HR considerations. More work means a more robust process for delivering. You might be considering joining forces through mergers and acquisitions or joint ventures.

Expanding your workforce might involve sponsoring migrant workers from around the globe. Our team can help you prepare for the unexpected to avoid commercial disputes arising – but if they are unavoidable, we can support you through the courts or via mediation.

Need help with:

HR considerations Mergers and acquisitions Joint ventures Sponsoring migrant workers Commercial disputes Mediation

Growth and maturity

The market and financial climate is always changing, presenting fresh challenges as well as hidden opportunities. If you’re seeking new routes to market, our inward investment team are on hand with expert advice. Our commercial property team can advise on licensing if you need flexibility to change premises easily as your business grows. We can also advise on restructuring exercises to avoid risks posed by former employees and competitors.

Need help with:

Inward investment Commercial property Licensing Restructuring exercises

Exit and succession

When starting a business, it’s easy to forget that at some point you’re going to leave. The decisions you make early on can help when it comes to succession and exit planning strategies. We can also set out the various options available to reduce liabilities if you plan to terminate your lease.

Need help with:

Business planning Terminate your lease

Fields
PHP
SCSS
JavaScript
Pages
Notes

Field

Field Type

Field Name

Instructions

Block Data

tab

Carousel Slides

repeater

carousel_slides

-- Slide Type

select

slide_type

-- Navigation Title

text

navigation_title

This is the title given to the slide on the fixed navigation on the left hand side.

-- Heading Type

select

heading_type

-- Heading Text

text

heading_text

-- Copy

wysiwyg

copy

-- Links Title

text

links_title

-- Buttons

repeater

buttons_list

---- Button

link

button

-- Image

image

Block Meta

tab

text

block_id

Block Classes

text

block_classes

Block Theme

select

block_theme

Background Colors

select

background_colors

Padding Top

select

padding_top

Padding Bottom

select

padding_bottom

Margin Top

select

margin_top

Margin Bottom

select

margin_bottom

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

.block-full-screen-carousel {
	position: relative;

	.swiper {
		height: auto;
		width: 100%;

		@include bp($xl) {
			height: calc(100vh - 141px);
		}
	}

	.swiper-wrapper {
		@include bp($xl, 'true') {
			transform: none !important;
		}
	}

	&__slide-content {
		position: relative;
		z-index: 9;

		p {
			&:last-of-type {
				margin-bottom: 0;
			}
		}

		hr {
			margin-top: rem-calc(25);
			margin-bottom: rem-calc(25);
			background-color: $lightBlue;
			border-width: 0;
			height: rem-calc(1);
		}
	}

	&__slide-image {
		margin-top: 0;

		@include bp($xl) {
			margin-top: rem-calc(60);
		}

		img {
			width: 100%;
		}
	}

	&__slide-links-title {
		font-weight: 700;
		font-size: rem-calc(18);
		margin-bottom: rem-calc(16);
	}

	&__navigation {
		position: absolute;
		top: rem-calc(80);
		bottom: rem-calc(80);
		z-index: 99;
	}

	&__navigation-bar {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: rem-calc(2);
		background-color: $lightBlue;
		height: calc(100vh - (141px * 2));

		&-progress {
			background-color: $orange;
			width: 100%;
			transition: all 0.3s ease-in-out;
		}
	}

	&__navigation-list {
		list-style-type: none;
		margin-left: rem-calc(-22);
		margin-top: rem-calc(-10);
		right: auto !important;
		top: auto !important;
		transform: none !important;
		width: 100%;

		li {
			text-transform: uppercase;
			font-size: rem-calc(12);
			font-weight: 700;
			letter-spacing: 1.5px;
			color: $blueGrey !important;
			margin-bottom: rem-calc(14) !important;
			position: relative;
			width: auto;
			height: auto;
			background-color: transparent;
			transition: all 0.2s ease-out;
			opacity: 1;

			&.swiper-pagination-bullet-active,
			&.active {
				color: $darkBlue !important;

				&:after {
					content: '';
					position: absolute;
					top: 0;
					left: rem-calc(-40);
					width: rem-calc(16);
					height: rem-calc(16);
					border-radius: 50%;
					background-color: $orange;
				}

				a {
					color: $darkBlue !important;
				}
			}

			a {
				text-decoration: none;
				color: $blueGrey;
				transition: all 0.2s ease-in-out;

				&:hover {
					color: $orange;
				}
			}
		}
	}

	.swiper-slide,
	.block-full-screen-carousel__slide-wrapper {

		@include bp($xl, 'true') {
			height: auto !important;
		}

		.block-full-screen-carousel__slide-content {
			background-color: $navy;
			color: $white;
			padding: rem-calc(40);

			.heading {
				color: $white;
			}

			.e-link-text {
				color: $white;
			}
		}

		&:nth-child(even) {
			background-color: $veryLightBlue;

			.block-full-screen-carousel__slide-image-column {
				margin-left: 0;

				@include bp($lg) {
					margin-left: calc(1 / 12 * -100%);
				}
			}

			.block-full-screen-carousel__slide-content {
				background-color: $white;
				color: $darkBlue;

				.heading {
					color: $darkBlue;
				}

				.e-link-text {
					color: $darkBlue;
				}
			}
		}

		&:nth-child(odd) {
			.block-full-screen-carousel__slide-row {
				flex-direction: row-reverse;
			}

			.block-full-screen-carousel__slide-text-column {
				margin-left: 0;

				@include bp($lg) {
					margin-left: calc(1 / 12 * -100%);
				}
			}
		}
	}

	&__slide-content {
		.block-full-screen-carousel__slide--text & {
			background-color: transparent !important;
			color: $black !important;
			text-align: center;

			.heading {
				color: $black !important;
				@include fluid-type(32, 48);
			}

			hr {
				display: none;
			}
		}

		a {
			color: $darkBlue;
			transition: all 0.2s ease-in-out;

			&:hover {
				color: $orange;
			}
		}
	}

	&__slide {
		padding-top: rem-calc(0);
		padding-bottom: rem-calc(0);
		min-height: 0;
		// min-height: 100vh;
		height: auto;
		display: flex;
		// align-items: center;
		// position: sticky;
		// top: 141px;

		@include bp($lg) {
			padding-top: rem-calc(80);
			padding-bottom: rem-calc(80);
		}

		// @include bp($xl) {
		// 	min-height: calc(100vh - 141px);
		// }
	}

	&__slide--text {
		.block-full-screen-carousel__slide-text-column {
			margin-left: 0 !important;
		}
	}

	&__slide-next {
		width: rem-calc(32);
		height: rem-calc(32);
		margin-top: rem-calc(32);
		padding: 0;
		border: none;
		border: 1px solid $darkBlue;
		border-radius: 50%;
		background-color: transparent;
		background-image: url('#{$asset-path}/icons/icon-full-arrow-down-navy.svg');
		background-position: center;
		background-repeat: no-repeat;
		transition: all 0.3s ease-out;
		display: none;

		@include bp($xl) {
			display: inline-block;
		}

		&:hover {
			background-color: $navy;
			background-image: url('#{$asset-path}/icons/icon-full-arrow-down-white.svg');
		}
	}


}

class FullScreenCarousel {
	/**
	 * 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-full-screen-carousel');
		this.init();
	}

	/**
	 * Example function to run class logic
	 * Can access `this.block`
	 */
	init() {
		this.blocks.forEach((block) => {

			// Navigation Links
			const slideLinks = block.querySelectorAll(".block-full-screen-carousel__navigation-list li");
			// slideLinks.forEach((link) => {
			// 	link.addEventListener("click", () => {
			// 		slideLinks.forEach((link) => {
			// 			link.classList.remove("active");
			// 		})

			// 		link.closest('li').classList.add("active");
			// 	})
			// });

			// Pin Navigation Element
			ScrollTrigger.create({
				trigger: "#block-full-screen-carousel",
				start: "top 141px",
				end: "bottom bottom",
				pin: ".block-full-screen-carousel__navigation"
			});

			const slideWrappers = block.querySelectorAll(".block-full-screen-carousel__slide-wrapper");
			const progressBar = block.querySelector(".block-full-screen-carousel__navigation-bar-progress");

			slideWrappers.forEach((slide) => {
				ScrollTrigger.create({
					trigger: slide,
					start: "top 150px",
					end: "bottom bottom",
					onEnter: () => {
						let slideID = slide.id;
						slideLinks.forEach((link) => {
							link.classList.remove("active");
						});
						block.querySelector(`.block-full-screen-carousel__navigation-list a[href="#${slideID}"]`).closest('li').classList.add("active");
						let tabIndex = parseInt(slideID.replace("slide-", ""));
						progressBar.style.height = tabIndex / slideWrappers.length * 100 + '%';
					},
					onEnterBack: () => {
						let slideID = slide.id;
						slideLinks.forEach((link) => {
							link.classList.remove("active");
						});
						block.querySelector(`.block-full-screen-carousel__navigation-list a[href="#${slideID}"]`).closest('li').classList.add("active");
						let tabIndex = parseInt(slideID.replace("slide-", ""));
						progressBar.style.height = tabIndex / slideWrappers.length * 100 + '%';
					},
				});
			})

			const slideNextButtons = block.querySelectorAll(".block-full-screen-carousel__slide-next");

			if (slideNextButtons) {
				slideNextButtons.forEach((nextButton) => {
					nextButton.addEventListener("click", function() {
						var currentSection = this.closest(".block-full-screen-carousel__slide-wrapper");
						var nextSection = currentSection.nextElementSibling;
						if (nextSection) {
							gsap.to(window, {
								scrollTo: nextSection,
							});
						}
					})
				})
			}


			// const blockCarousel = block.querySelector(".swiper");
			// const blockSlides = block.querySelectorAll(".swiper-slide");
			// const blockSlidesLength = blockSlides.length;

			// var blockData = [];

			// blockSlides.forEach((block) => {
			// 	blockData.push({
			// 		slideTitle: block.getAttribute('data-nav-title'),
			// 	});
			// });

			// var swiper = new Swiper(blockCarousel, {
			// 	direction: "vertical",
			// 	speed: 500,
			// 	pagination: {
			// 		el: '.block-full-screen-carousel__navigation-list',
			// 		clickable: true,
			// 		type: 'bullets',
			// 		renderBullet: function (index, className) {
			// 			return '' + blockData[index].slideTitle + '';
			// 		},
			// 	},
			// 	mousewheel: {
			// 		forceToAxis: true,
			// 		invert: false,
			// 		releaseOnEdges: true,
			// 	},

			// });

			// const toggleMousewheel = (swiper) => {
			// 	if (window.innerWidth < 1200) {
			// 		swiper.detachEvents();
			// 		swiper.mousewheel.disable();
			// 	} else {
			// 		swiper.attachEvents();
			// 		swiper.mousewheel.enable();
			// 	}
			// }

			// toggleMousewheel(swiper);

			// console.log(swiper.mousewheel.enabled);

			// const slideNextButtons = block.querySelectorAll(".block-full-screen-carousel__slide-next");

			// if (slideNextButtons) {
			// 	slideNextButtons.forEach(button => {
			// 		button.addEventListener("click", function(e) {
			// 			swiper.slideNext();
			// 		});
			// 	})
			// }

			// const slideToCarousel = () => {
			// 	if (window.innerWidth >= 1200) {
			// 		swiper.on('beforeTransitionStart', function (e) {
			// 			// alert("test");
			// 			gsap.to(window, {
			// 				scrollTo: {y: '#block-full-screen-carousel', autoKill: true, offsetY: 141},
			// 				duration: 0.5,
			// 				overwrite: true,
			// 			});
			// 		});
			// 	}
			// }

			// slideToCarousel;


			// const progressBar = block.querySelector(".block-full-screen-carousel__navigation-bar-progress");

			// if (progressBar) {
			// 	swiper.on('slideChange', function (e) {
			// 		let progressBarPercentage = (swiper.activeIndex + 1) / blockSlidesLength * 100;
			// 		progressBar.style.height = progressBarPercentage + "%";
			// 	});
			// }


			// const panels = block.querySelectorAll(".block-full-screen-carousel__slide-container");
			// const carouselLinksList = block.querySelector(".block-full-screen-carousel__navigation");
			// const carouselItems = block.querySelectorAll(".block-full-screen-carousel__navigation li");
			// const carouselLinks = block.querySelectorAll('.block-full-screen-carousel__navigation-list a');
			// const carouselBar = block.querySelector(".block-full-screen-carousel__navigation-bar-progress");

		});

	}
}

new FullScreenCarousel();

Page Title

Page Type

Page URL

Business

page

https://www.bpcollins.co.uk/business/

Personal

page

https://www.bpcollins.co.uk/personal/

Animation / States

Each slide/screen within the full page carousel will have a minimum height of 100vh
As the user scrolls, they will navigate to the next slide within the full screen carousel
On the left hand side the user will be able to navigate through the slides via a fixed vertical navigation. Upon clicking on a link the user will then be scrolled vertically to that slide

External Libraries

Swiper
ScrollTrigger (GSAP)

Notes (Design / Dev / SEO)

No notes.