<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 class="mol-socialfeed">
<div class="swiper-container">
<div class="swiper-wrapper">
{{#each slides}}
<a class="socialfeed-post swiper-slide" href="@post.Link">
{{render '@image'}}
<div class="socialfeed-post--content">
<div class="content--heading">
<div class="socialfeed-post--icon">
{{render '@icon'}}
</div>
<div>
{{render '@heading--h3' heading merge=true}}
<p class="socialfeed-post--created"></p>
</div>
<div class="socialfeed-post--posttype @post.StringPostType">
{{render '@icon'}}
</div>
</div>
<p class="socialfeed-post--description">
{{render '@paragraph' intro merge=true}}
</p>
</div>
</a>
{{/each}}
</div>
</div>
</div>
{
"slides": [
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
},
{
"image": {
"src": "https://picsum.photos/id/200/263/360"
},
"heading": {
"text": "Vebego"
},
"date": {
"text": "18 juli om 11:14 uur"
},
"intro": {
"text": "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..."
}
}
]
}
.mol-socialfeed {
.swiper-container {
overflow: unset;
}
.socialfeed-post {
@apply bg-white border border-gray-100 rounded-xl overflow-hidden;
&:hover {
.atm-image img,
.atm-video video {
transform: scale(1.05);
}
}
.atm-image {
@apply overflow-hidden;
img {
@apply w-full h-full object-cover object-top transition duration-300 aspect-[4/3];
}
}
.atm-video {
@apply overflow-hidden p-0;
video {
@apply w-full aspect-[4/3] object-cover transition duration-300 relative;
}
}
.socialfeed-post--content {
@apply p-4 md:p-6;
.content--heading {
@apply flex items-center mb-4 gap-4;
.socialfeed-post--icon {
@apply border border-gray-100 w-10 h-10 grid place-items-center rounded-full;
img {
@apply w-6;
}
}
.atm-icon {
@apply text-secondary-col-1;
}
.atm-heading {
@apply m-0;
}
.socialfeed-post--posttype {
@apply ml-auto;
}
}
}
}
}
(function () {
'use strict';
// Get all
const socialfeedSliders = document.querySelectorAll('.mol-socialfeed');
for (const socialfeedSlider of socialfeedSliders) {
const swiperContainer = socialfeedSlider.querySelector('.swiper-container');
new Swiper(swiperContainer, {
slidesPerView: 1.1,
spaceBetween: 16,
watchOverflow: true,
navigation: {
nextEl: '.swiper-next',
prevEl: '.swiper-prev',
},
pagination: {
el: '.swiper-pagination',
clickable: true,
type: 'bullets',
},
breakpoints: {
640: {
slidesPerView: 1.7,
},
768: {
spaceBetween: 32,
},
1024: {
slidesPerView: 2.1,
},
1400: {
slidesPerView: 2.7,
},
},
on: {
afterInit: function () {
checkArrows(this);
},
resize: function () {
checkArrows(this);
},
},
});
}
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');
}
}
})();
No notes defined.