Components
48
Background Gradients Breadcrumb Content Card Carousel Content Card Grid Content Cards Two Column Content Contact Form Content Contact Form Reveal Content Courses Map Content Courses Search Content Event Details Content Events Carousel Content Faqs Content Featured Cards Content Featured Products Content Featured Products Carousel Content Form Over Image Content Game Elements Content Hall Of Fame Carousel Content Horizontal Accordion Content Horizontal Scrolling Content How To Find Us Content Job Roles Grid Content Map Embed Content Marquee Text Content Media Carousel Content Players Content Quick Links Content Quote Over Image Content Simple Text And Image Variations Content Specification Content Stat Row Content Stat With Images And Content Content Text And Cards Grid Content Text And Image Variations Content Text Columns Content Text Image Carousel Content Text Over Image Content Title Content Useful Links Content Vacancies Grid Cookie Table Example Hero Basic Hero Featured Card Hero Game Hero Video And Carousel Hero Video Cards Playlist Hero Video Player

Content Events Carousel

There are no ACF fields assigned to this component.

				
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";

.block-events-carousel {
	overflow: hidden;

	&__meta {
		display: flex;
		flex-direction: row;
		gap: rem-calc(16);
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		@include margin-bottom( rem-calc(60) );

		.heading {
			margin-bottom: 0;
		}

		.btn {
			margin-right: 0;
		}
	}

	.swiper {
		overflow: visible;

		&.swiper-initialized {
			display: flex;
		}

		&:not(.swiper-initialized) {
			.swiper-wrapper {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;

				.swiper-slide {
					width: 100%;
				}
			}
		}
	}

	.swiper-slide {
		display: flex;

		@include bp($md) {
			aspect-ratio: 1720/800;
		}
	}
}
class EventsCarousel {
	/**
	 * @param {object} block
	 */
	constructor( block ) {
		this.block = block;
		this.swiper = null;

		ScrollTrigger.create({
			trigger: this.block,
			start: 'top bottom',
			end: 'bottom top',
			onEnter: () => this.initialiseSwiper(),
		});
	}

	initialiseSwiper() {
		if ( this.swiper ) {
			return;
		}

		this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
			slidesPerView: 1,
			spaceBetween: 16,
			centeredSlides: true,
			speed: 600,
			navigation: {
				nextEl: this.block.querySelector( '.swiper-button-next' ),
				prevEl: this.block.querySelector( '.swiper-button-prev' ),
			},
			breakpoints: {
				600: {
					slidesPerView: 1.05,
					spaceBetween: 16,
				},
				768: {
					slidesPerView: 1.05,
					spaceBetween: 16,
				},
				992: {
					slidesPerView: 1.1,
					spaceBetween: 16,
				},
				1400: {
					slidesPerView: 1.1,
					spaceBetween: 30,
				},
			}
		});
	}
}

document.querySelectorAll('.block-events-carousel').forEach((block) => {
	new EventsCarousel( block );
});
Page Title
Page Type
Page URL
  • Option to pick display type: auto, by category, manual
    • All 3 options can only show upcoming events
  • Option to choose how many events to display (unlimited if manual selection)
  • If more than one event is shown, carousel functionality will kick in

Animation: