<div class='multi-column-card-slider'>
<div class='multi-column-card-slider-header'>
<h3 class="heading multi-column-card-slider-title">
Campus Diepenbeek
</h3>
<div class='multi-column-card-slider-header-navigation'>
<div class='multi-column-card-slider-header-navigation-index'>
<div class='multi-column-card-slider-index-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
Ma, 24-04
</div>
<div class='swiper-slide'>
Di, 25-04
</div>
<div class='swiper-slide'>
Woe, 26-04
</div>
<div class='swiper-slide'>
Dond, 27-04
</div>
<div class='swiper-slide'>
Vrij, 28-04
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-header-navigation-control'>
<div class='swiper-prev'>
<a href="#" class="prev-next prev-next-prev prev-next-secondary">
<span class="icon fal fa-angle-left fa-2x " aria-hidden="true"></span>
</a>
</div>
<div class='swiper-next'>
<a href="#" class="prev-next prev-next-next prev-next-secondary">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-card-slider'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-row'>
<div class="card card-small">
<div class="card-container ">
<div class="card-wrapper">
</div>
<div class="heading-container">
<h2 class="heading title">
Lorem ipsum dolor sit amet
</h2>
<span class="icon fas fa-seedling heading-icon heading-icon-green" aria-hidden="true"></span>
</div>
<div class="information">
<div class='paragraph '>
<p>Lorem ipsum dolor sit amet, <a href="/">Duis malesuada justo</a> ut tincidunt tincidunt. Vestibulum in felis quam. In <strong>varius</strong> ligula vel ultricies consequat sed orci a, sagittis finibus sem. Ut bibendum purus id sodales scelerisque.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider'>
<div class='multi-column-card-slider-header'>
{{render '@heading' heading}}
<div class='multi-column-card-slider-header-navigation'>
<div class='multi-column-card-slider-header-navigation-index'>
<div class='multi-column-card-slider-index-slider'>
<div class='swiper-wrapper'>
{{#each slides as |slide|}}
<div class='swiper-slide'>
{{slide.title}}
</div>
{{/each}}
</div>
</div>
</div>
<div class='multi-column-card-slider-header-navigation-control'>
<div class='swiper-prev'>
{{render '@prev-next--prev-secondary'}}
</div>
<div class='swiper-next'>
{{render '@prev-next--next-secondary'}}
</div>
</div>
</div>
</div>
<div class='multi-column-card-slider-card-slider'>
<div class='swiper-wrapper'>
{{#each slides as |slide|}}
<div class='swiper-slide'>
<div class='grid md:grid-cols-2 gap-4'>
{{#each slide.cards as |card|}}
<div class='multi-column-card-slider-row'>
{{render '@card--card-small'}}
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
</div>
</div>
{
"heading": {
"tag": "h3",
"text": "Campus Diepenbeek",
"modifier": "multi-column-card-slider-title"
},
"slides": [
{
"title": "Ma, 24-04",
"cards": [
{},
{},
{},
{}
]
},
{
"title": "Di, 25-04",
"cards": [
{},
{},
{},
{}
]
},
{
"title": "Woe, 26-04",
"cards": [
{},
{},
{},
{}
]
},
{
"title": "Dond, 27-04",
"cards": [
{},
{},
{},
{}
]
},
{
"title": "Vrij, 28-04",
"cards": [
{},
{},
{},
{}
]
}
]
}
.multi-column-card-slider {
display: block;
.multi-column-card-slider-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: baseline;
@screen sm {
flex-wrap: nowrap;
}
}
.multi-column-card-slider-header-navigation {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
@screen sm {
width: auto;
}
}
.multi-column-card-slider-header-navigation-control {
display: flex;
flex-shrink: 0;
}
.multi-column-card-slider-title {
margin-bottom: 0;
}
.multi-column-card-slider-index-slider {
@apply text-red;
display: block;
height: 28px;
width: 120px;
font-size: 20px;
line-height: 28px;
font-weight: 700;
}
.multi-column-card-slider-card-slider {
overflow: hidden;
.swiper-wrapper {
align-items: flex-start;
height: auto;
}
.swiper-slide {
opacity: 0;
visibility: hidden;
transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
}
.swiper-slide-active {
opacity: 1;
visibility: visible;
}
}
}
(function () {
'use strict';
var slider = document.querySelectorAll('.multi-column-card-slider');
for (var i = 0; i < slider.length; i++) {
var indexSlider = slider[i].querySelector(
'.multi-column-card-slider-index-slider'
);
var cardSlider = slider[i].querySelector(
'.multi-column-card-slider-card-slider'
);
var indexSlider = new Swiper(indexSlider, {
effect: 'fade',
fadeEffect: {
crossFade: true,
},
loop: true,
spaceBetween: 16,
slidesPerView: 1,
watchSlidesProgress: true,
longSwipes: false,
shortSwipes: false,
simulateTouch: false,
});
var cardSlider = new Swiper(cardSlider, {
loop: true,
spaceBetween: 16,
slidesPerView: 1,
thumbs: {
swiper: indexSlider,
},
navigation: {
nextEl: slider[i].querySelector('.swiper-next'),
prevEl: slider[i].querySelector('.swiper-prev'),
},
});
}
})();
No notes defined.