<div class='org-social-feed-block'>
<div class="vebego-container">
<div class="swiper-top">
<h2 class="atm-heading ">Instagram feed</h2>
<div class="navigation">
<div class="swiper-prev"> <i class="atm-icon fa-solid fa-long-arrow-left "></i>
</div>
<div class="swiper-next"> <i class="atm-icon fa-solid fa-long-arrow-right fa-md "></i>
</div>
</div>
</div>
<div class="socialfeed">
<div class="mol-socialfeed">
<div class="swiper-container">
<div class="swiper-wrapper">
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
<a class="socialfeed-post swiper-slide" href="@post.Link">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
<i class="atm-icon far fa-external-link "></i>
</div>
<div>
<h3 class="atm-heading ">Vebego</h3>
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
<i class="atm-icon far fa-external-link "></i>
</div>
</div>
<p class="socialfeed-post--description">
<div class="atm-paragraph text-md">AI can't empty real trash cans, but our cleaners can. And they do it with a smile, too. That's the beauty of human work. Curious about what else Ve...</div>
</p>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="socialfeed-socials">
Volg onze kanalen
<ul class="mol-social-media horizontal ">
<li><a href="https://www.facebook.com" target="_blank" aria-label="Facebook"> <i class="atm-icon fa-brands fa-facebook-f fa-lg "></i>
</a></li>
<li><a href="https://www.instagram.com" target="_blank" aria-label="Instagram"> <i class="atm-icon fa-brands fa-instagram fa-lg "></i>
</a></li>
<li><a href="https://www.x.com" target="_blank" aria-label="X"> <i class="atm-icon fa-brands fa-x-twitter fa-lg "></i>
</a></li>
<li><a href="https://www.youtube.com" target="_blank" aria-label="YouTube"> <i class="atm-icon fa-brands fa-youtube fa-lg "></i>
</a></li>
<li><a href="https://www.linkedin.com" target="_blank" aria-label="LinkedIn"> <i class="atm-icon fa-brands fa-linkedin-in fa-lg "></i>
</a></li>
<li><a href="https://wa.me/?text=" target="_blank" aria-label="Whatsapp"> <i class="atm-icon fa-brands fa-whatsapp fa-lg "></i>
</a></li>
</ul>
</div>
</div>
</div>
<div class='org-social-feed-block'>
<div class="vebego-container">
<div class="swiper-top">
{{render '@heading' heading}}
<div class="navigation">
<div class="swiper-prev">{{render "@icon" prev merge=true}}</div>
<div class="swiper-next">{{render "@icon" next merge=true}}</div>
</div>
</div>
<div class="socialfeed">
{{render '@social-feed'}}
</div>
<div class="socialfeed-socials">
{{ socials-intro }}
{{render '@social-media'}}
</div>
</div>
</div>
{
"next": {
"icon": "fa-long-arrow-right",
"style": "fa-solid",
"size": "fa-md"
},
"prev": {
"icon": "fa-long-arrow-left",
"style": "fa-solid"
},
"heading": {
"text": "Instagram feed",
"tag": "h2"
},
"socials-intro": "Volg onze kanalen"
}
.org-social-feed-block {
@apply bg-primary bg-opacity-10 pt-24 pb-16 overflow-hidden;
.atm-heading {
@apply text-secondary-col-1 m-0;
}
.socialfeed {
@apply mt-4 mb-8;
iframe {
@apply max-w-full;
}
}
.socialfeed-socials {
@apply flex flex-col md:flex-row md:items-center gap-4 md:gap-8;
.mol-social-media {
@apply flex;
}
}
.swiper-top {
@apply flex justify-between items-center mb-10;
.navigation {
@apply flex self-end;
* {
@apply transition;
}
.swiper-prev,
.swiper-next {
@apply focus:ring-2 cursor-pointer text-white bg-accent-1 h-11 w-11 rounded-full inline-flex justify-center items-center;
> * {
@apply pointer-events-none;
}
&.swiper-button-disabled {
@apply opacity-50;
&:hover {
.atm-icon {
transform: translateX(0px);
}
}
}
&.hide-prevnext {
@apply hidden;
}
}
.swiper-prev {
@apply mr-4;
&:hover {
.atm-icon {
transform: translateX(-2px);
}
}
}
.swiper-next:hover {
.atm-icon {
transform: translateX(2px);
}
}
}
.atm-heading {
@apply text-secondary-col-1;
}
.swiper-pagination {
@apply bottom-0;
&-bullet {
@apply bg-gray;
@apply p-1;
&-active {
@apply bg-navy;
}
}
}
}
}
(function () {
'use strict';
var socialFeedSliders = document.querySelectorAll('.org-social-feed-block');
function checkArrows(swiper) {
if (swiper.isBeginning && swiper.isEnd) {
$(swiper.navigation.$prevEl).addClass('hide-prevnext');
$(swiper.navigation.$nextEl).addClass('hide-prevnext');
} else {
$(swiper.navigation.$prevEl).removeClass('hide-prevnext');
$(swiper.navigation.$nextEl).removeClass('hide-prevnext');
}
}
socialFeedSliders.forEach((socialFeedSlider) => {
const nextEl = socialFeedSlider.querySelector('.swiper-next');
const prevEl = socialFeedSlider.querySelector('.swiper-prev');
var swiperContainer =
socialFeedSlider.querySelector('.swiper-container');
new Swiper(swiperContainer, {
slidesPerView: 1.3,
spaceBetween: 32,
watchOverflow: true,
navigation: {
nextEl: nextEl,
prevEl: prevEl,
},
breakpoints: {
0: {
slidesPerView: 1.3,
spaceBetween: 16,
},
768: {
slidesPerView: 2,
},
1248: {
slidesPerView: 3,
},
},
on: {
afterInit: function () {
checkArrows(this);
},
resize: function () {
checkArrows(this);
},
},
});
})
})();
No notes defined.