<section class='org-card-slider'>
<div class='uhasselt-container'>
<div class='column'>
<div class='col-span-12 md:col-span-6 lg:col-span-3'>
<h2 class="heading ">
The quick brown fox jumps over the lazy dog
</h2>
<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>
<a href="#" class="button button-red ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
<div class='col-span-12 md:col-span-6 lg:col-span-9'>
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-slide'>
<div class="card card-quote">
<div class="card-container ">
<div class="card-wrapper">
<div class="video">
<iframe src="https://www.youtube.com/embed/8Z-96vawOGI" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="information">
<div class="info-row">
<div><span class="icon far fa-external-link " aria-hidden="true"></span></div>
<span class="text"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='swiper-pagination'></div>
</div>
<div class='swiper-prev'> <a href="#" class="prev-next prev-next-prev">
<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">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='org-card-slider'>
<div class='uhasselt-container'>
{{#if text}}
<div class='column'>
<div class='col-span-12 md:col-span-6 lg:col-span-3'>
{{render '@heading--h2'}}
{{render '@paragraph'}}
{{render '@button--red'}}
</div>
<div class='col-span-12 md:col-span-6 lg:col-span-9'>
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
{{#each cards}}
<div class='swiper-slide'>
{{render '@card--card-quote'}}
</div>
{{/each}}
</div>
<div class='swiper-pagination'></div>
</div>
<div class='swiper-prev'>{{render
'@prev-next--prev'
}}</div>
<div class='swiper-next'>{{render
'@prev-next--next'
}}</div>
</div>
</div>
</div>
{{else}}
<div class='card-slider'>
<div class='swiper-container'>
<div class='swiper-wrapper'>
{{#each cards}}
<div class='swiper-slide'>
{{render '@card'}}
</div>
{{/each}}
</div>
<div class='swiper-pagination'></div>
</div>
<div class='swiper-prev'>{{render '@prev-next--prev'}}</div>
<div class='swiper-next'>{{render '@prev-next--next'}}</div>
</div>
{{/if}}
</div>
</section>
{
"cards": [
{},
{},
{},
{},
{},
{}
],
"text": {}
}
.org-card-slider {
@apply mb-16;
.column {
@apply md:grid;
@apply md:gap-8;
@apply mb-8;
@apply md:grid-cols-12;
}
.swiper-slide {
@apply h-auto;
@apply bg-white border border-solid border-gray shadow-xl;
.card-container {
@apply bg-none border-none border-0 shadow-none;
}
}
.card-slider {
@apply relative;
.swiper-container {
@apply pb-12;
.swiper-pagination {
@apply bottom-0;
&-bullet {
@apply bg-black opacity-100;
&-active {
@apply bg-red;
}
}
}
}
.swiper-prev,
.swiper-next {
@apply absolute top-1/3 transform -translate-y-1/2 z-10;
&.swiper-button-disabled {
@apply opacity-50;
}
}
.swiper-prev {
@apply -left-0 -translate-x-1/2;
}
.swiper-next {
@apply right-0 translate-x-1/2;
}
}
}
(function () {
'use strict';
var slider = document.querySelectorAll('.card-slider');
for (var i = 0; i < slider.length; i++) {
var swiperContainer = slider[i].querySelector('.swiper-container');
new Swiper(swiperContainer, {
watchOverflow: true,
spaceBetween: 16,
slidesPerView: 1,
loop: false,
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true
},
breakpoints: {
1024: {
slidesPerView: 2.2
},
1280: {
slidesPerView: 3.4
}
},
navigation: {
nextEl: slider[i].querySelector('.swiper-next'),
prevEl: slider[i].querySelector('.swiper-prev'),
}
});
}
})();
No notes defined.