@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-text-image-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 {
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-button-prev,
.swiper-button-next {
opacity: 1;
}
}
&__slide {
aspect-ratio: 1720/800;
max-height: 80vh;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
@include padding( rem-calc(44 58) );
&.theme--light {
picture {
&:before {
background: linear-gradient(to bottom, rgba($white, 0), $white);
}
}
}
p {
max-width: rem-calc(1000);
color: var(--text-color);
margin-bottom: 0;
position: relative;
z-index: 2;
}
picture {
display: flex;
flex-direction: column;
&:before {
width: 100%;
height: 80%;
content: '';
position: absolute;
bottom: 0;
left: 0;
pointer-events: none;
background: linear-gradient(to bottom, rgba($primary, 0), $primary);
opacity: 0.8;
z-index: 2;
}
}
}
}
class TextImageCarousel {
/**
* @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: 30,
speed: 600,
navigation: {
nextEl: this.block.querySelector( '.swiper-button-next' ),
prevEl: this.block.querySelector( '.swiper-button-prev' ),
},
});
}
}
document.querySelectorAll('.block-text-image-carousel').forEach((block) => {
new TextImageCarousel( block );
});
Animation: