@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-quick-links {
position: relative;
overflow: hidden;
&.equal-card-height {
.quick-links {
&__card {
flex-grow: 1;
}
}
}
.quick-links {
&__card {
--text-color: #{$primary};
display: flex;
flex-direction: column;
align-items: flex-start;
@include padding( rem-calc( 48 ) );
position: relative;
margin-top: auto;
transition: 0.3s box-shadow var( --ease );
&:hover {
box-shadow: 0 0 rem-calc(32) 0 rgba(3, 10, 50, 0.3);
}
&.theme--dark {
--text-color: #{$white};
--color-accent: #{$white};
}
&.theme--light {
--color-accent: #{$primary};
.btn {
--color-accent: #{$primary};
}
}
.heading {
@include margin-bottom( rem-calc( 24 ) );
line-height: 1;
}
.heading,
.content,
.btn {
color: var( --text-color );
}
.content {
@include margin-bottom( rem-calc( 100 ) );
}
.button-container {
margin-top: auto;
}
.btn {
@include fluid-type(16, 18);
text-transform: none;
margin-top: auto;
line-height: 1.8;
padding-bottom: rem-calc(3);
span {
font-weight: 700;
}
}
picture {
z-index: -1;
&:before {
width: 100%;
height: 100%;
content: '';
position: absolute;
inset: 0;
z-index: 1;
@include image-overlay();
pointer-events: none;
mix-blend-mode: darken;
opacity: 0.8;
}
}
}
}
.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%;
}
}
}
}
.swiper-slide {
display: flex;
flex-direction: column;
}
}
}
class QuickLinks {
/**
* @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;
}
let items = this.block.querySelectorAll( '.swiper-slide' );
let slidesPerView = 1;
let breakpoints = {};
if ( items.length === 2 ) {
slidesPerView = 1.25;
breakpoints = {
768: {
slidesPerView: 2,
},
};
}
if ( items.length === 3 ) {
slidesPerView = 1.25;
breakpoints = {
600: {
slidesPerView: 1.75,
},
768: {
slidesPerView: 2.05,
},
1000: {
slidesPerView: 2.25,
},
1400: {
slidesPerView: 2.5,
},
1600: {
slidesPerView: 3,
},
};
}
if ( items.length > 3 ) {
slidesPerView = 1.25;
breakpoints = {
600: {
slidesPerView: 1.75,
},
768: {
slidesPerView: 2.05,
},
1000: {
slidesPerView: 2.25,
},
1400: {
slidesPerView: 2.5,
},
1600: {
slidesPerView: 3,
},
1800: {
slidesPerView: 3.25,
},
};
}
this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
slidesPerView,
spaceBetween: 30,
speed: 600,
navigation: {
nextEl: this.block.querySelector( '.swiper-button-next' ),
prevEl: this.block.querySelector( '.swiper-button-prev' ),
},
breakpoints,
});
}
}
document.querySelectorAll('.block-quick-links').forEach((block) => {
new QuickLinks( block );
});
Animation: