<section class='org-numbers-block vebego-container'>
<h1 class="atm-heading ">Specialist in facility services</h1>
<div class='numbers-slider-wrapper'>
<div class='numbers-slider'>
<div class='swiper-container h-full'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/231/500/500" alt="">
</picture>
</div>
<div class='swiper-slide'>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/232/500/500" alt="">
</picture>
</div>
<div class='swiper-slide'>
<picture class="atm-image ">
<img class="" src="https://picsum.photos/id/233/500/500" alt="">
</picture>
</div>
</div>
</div>
</div>
<div class='space-y-7 sm:w-1/2'>
<div class='h-[240px] flex space-x-6'>
<div class='h-full w-1 bg-gradient-to-b from-links to-secondary-col-1 relative'>
<div class='h-0 w-full absolute bg-gray-100 top-0 slider-progress-top transition-all'></div>
<div class='h-2/3 w-full absolute bg-gray-100 bottom-0 slider-progress-bottom transition-all'></div>
</div>
<div class="mol-counter">
<a href="" class="counter-item">
<div class="number">
<span class="count-number">31</span>
</div>
<div class="text">jaar ervaring</div>
</a>
<span class="atm-slash " style="width: 1px; height: 30px;">
</span>
<a href="" class="counter-item">
<div class="number">
<span class="count-number">100</span>
</div>
<div class="text">klanten</div>
</a>
<span class="atm-slash " style="width: 1px; height: 30px;">
</span>
<a href="" class="counter-item">
<div class="number">
<span class="count-number">750</span>
</div>
<div class="text">medewerkers</div>
</a>
<span class="atm-slash " style="width: 1px; height: 30px;">
</span>
</div>
</div>
<div class="atm-paragraph text-md">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur consectetur interdum nulla, ut pretium nibh semper sed. Vivamus porta lectus sit amet accumsan convallis. Duis hendrerit risus justo, quis euismod nisi pellentesque et. Suspendisse quis ultrices orci. Praesent vitae fermentum eros. Quisque elementum, ante nec tincidunt pellentesque, diam elit semper erat, sit amet dapibus erat risus id nisl.</p>
</div>
</div>
</div>
</section>
<section class='org-numbers-block vebego-container'>
{{render '@heading' heading merge=true}}
<div class='numbers-slider-wrapper'>
<div class='numbers-slider'>
<div class='swiper-container h-full'>
<div class='swiper-wrapper'>
{{#each images}}
<div class='swiper-slide'>
{{render '@image' this}}
</div>
{{/each}}
</div>
</div>
</div>
<div class='space-y-7 sm:w-1/2'>
<div class='h-[240px] flex space-x-6'>
<div
class='h-full w-1 bg-gradient-to-b from-links to-secondary-col-1 relative'
>
<div
class='h-0 w-full absolute bg-gray-100 top-0 slider-progress-top transition-all'
></div>
<div
class='h-2/3 w-full absolute bg-gray-100 bottom-0 slider-progress-bottom transition-all'
></div>
</div>
{{render '@counter' counter}}
</div>
{{render '@paragraph'}}
</div>
</div>
</section>
{
"heading": {
"text": "Specialist in facility services"
},
"images": [
{
"src": "https://picsum.photos/id/231/500/500"
},
{
"src": "https://picsum.photos/id/232/500/500"
},
{
"src": "https://picsum.photos/id/233/500/500"
}
],
"counter": {
"items": [
{
"text": "jaar ervaring",
"number": "31"
},
{
"text": "klanten",
"number": "100"
},
{
"text": "medewerkers",
"number": "750"
}
]
}
}
.org-numbers-block {
.numbers-slider-wrapper {
@apply flex flex-col sm:flex-row space-y-10 xl:space-x-32 sm:space-x-8;
}
.atm-heading {
@apply text-secondary-col-1 mb-9;
}
.numbers-slider {
@apply sm:w-1/2;
}
.atm-image {
@apply h-full w-full relative;
img {
@apply h-full w-full top-0 left-0 sm:absolute object-cover;
}
}
.atm-paragraph {
p {
@apply mb-0;
}
}
.mol-counter {
@apply flex flex-col justify-around items-start;
.atm-slash {
@apply hidden;
}
.counter-item {
@apply text-left flex items-center;
.number {
@apply font-display;
}
}
}
}
(function () {
'use strict';
var imageSliders = document.querySelectorAll('.org-numbers-block');
for (var i = 0; i < imageSliders.length; i++) {
var swiperContainer =
imageSliders[i].querySelector('.swiper-container');
const progressTop = imageSliders[i].querySelector(
'.slider-progress-top'
);
const progressBottom = imageSliders[i].querySelector(
'.slider-progress-bottom'
);
new Swiper(swiperContainer, {
slidesPerView: 1,
watchOverflow: true,
effect: 'fade',
allowTouchMove: false,
autoplay: {
delay: 3000,
},
on: {
// Slider index has a gradient
afterInit: function () {
progressTop.style.height = `${
(100 / 3) * this.activeIndex
}%`;
progressBottom.style.height = `${
(100 / 3) *
(this.slides.length - (this.activeIndex + 1))
}%`;
},
slideChange: function () {
progressTop.style.height = `${
(100 / 3) * this.activeIndex
}%`;
progressBottom.style.height = `${
(100 / 3) *
(this.slides.length - (this.activeIndex + 1))
}%`;
},
},
});
}
})();
No notes defined.