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 Card 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-card-carousel {
	overflow: hidden;
	@include padding-bottom( rem-calc(60) );

	&__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,
		.btn {
			color: var(--text-color);
		}

		.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%;

					@include bp(600px) {
						width: 50%;
					}

					@include bp(992px) {
						width: 33%;
					}

					@include bp(1400px) {
						width: 25%;
					}
				}
			}
		}
	}

	.swiper-slide {
		display: flex;
	}
}
class CardCarousel {
	/**
	 * @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.25,
			spaceBetween: 16,
			speed: 600,
			navigation: {
				nextEl: this.block.querySelector( '.swiper-button-next' ),
				prevEl: this.block.querySelector( '.swiper-button-prev' ),
			},
			breakpoints: {
				600: {
					slidesPerView: 2.25,
				},
				768: {
					slidesPerView: 2.5,
				},
				992: {
					slidesPerView: 3,
				},
				1400: {
					slidesPerView: 4,
				},
			}
		});
	}
}

document.querySelectorAll('.block-card-carousel').forEach((block) => {
	new CardCarousel( block );
});
  • Option to pick a post type to show content from. Defaults to `post`
  • Option to show a specific category to show content from
  • Choose how many cards to display; min.4, max.32
  • CTA is manually added due to needing to link to different content.

Animation:

  • On hover of the carousel, the carousel arrows show and can be interacted.
  • Carousel slides as per standard animation.
  • Hover a card gives it a `highlighted` appearance.