@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-featured-products-carousel {
overflow: hidden;
&:not([class*=pad-]) {
@include padding( rem-calc(32 0) );
}
.swiper {
max-height: 90vh;
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($md) {
width: 50%;
}
}
}
}
.swiper-slide {
box-sizing: border-box;
}
}
}
class FeaturedProductsCarousel {
/**
* @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: 30,
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,
},
992: {
slidesPerView: 3,
},
}
});
}
}
document.querySelectorAll('.block-featured-products-carousel').forEach((block) => {
new FeaturedProductsCarousel( block );
});
Animation: