Facts
Facts in Form eines Sliders dienen zur prominenten Weiterleitung auf relevante Seiteninhalte.
Facts Gradient
22/02/2021
<div class="module module--facts module--facts--layout-a">
<div class="inner swiper-container">
<div class="facts swiper-wrapper">
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact A</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact B</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact C</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
</div>import Swiper, { Pagination } from 'swiper';
(function () {
function init() {
document.querySelectorAll('.module--facts').forEach(module => {
const container = module.querySelector('.swiper-container');
Swiper.use([Pagination]);
// eslint-disable-next-line no-new
new Swiper(container, {
loop: true,
autoHeight: true,
pagination: {
el: '.pagination',
bulletClass: 'bullet',
bulletActiveClass: 'active',
clickable: true
}
});
})
// $('.module.facts.swiper-container:not(.initiated)').each(function (index, element) {
// if ($(element).find('.fact').length < 2) {
// return;
// }
// var slider = new Swiper(element, {
// 'direction': 'horizontal',
// 'loop': true,
// 'autoplay': false,
// 'paginationClickable': true,
// 'slideClass': 'fact',
// 'slideActiveClass': 'active',
// 'bulletClass': 'bullet',
// 'bulletActiveClass': 'active',
// 'pagination': $(element).find('.pagination')
// });
// $(element).find('.pagination').css('display', 'inline-block');
// $(element).addClass('initiated');
// });
}
// ——————————————————————————————————————————————————
document.addEventListener('DOMContentLoaded', init);
})();
Facts
22/02/2021
<div class="module module--facts module--facts--layout-b">
<div class="inner swiper-container">
<div class="facts swiper-wrapper">
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact A</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact B</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
<div class="fact swiper-slide ">
<div class="inner">
<div class="image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/TB-Team.png' alt='TB Team' /> </div>
<div class="title">
<h2 class="h h1plus">Fact C</h2>
</div>
<div class="content">
<div class="content__text">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam </div>
<div class="content__link">
<a href="https://teambank.de" target="_blank" class="link">TeamBank</a> </div>
</div>
</div>
</div>
</div>
<div class="pagination"></div>
</div>
</div>import Swiper, { Pagination } from 'swiper';
(function () {
function init() {
document.querySelectorAll('.module--facts').forEach(module => {
const container = module.querySelector('.swiper-container');
Swiper.use([Pagination]);
// eslint-disable-next-line no-new
new Swiper(container, {
loop: true,
autoHeight: true,
pagination: {
el: '.pagination',
bulletClass: 'bullet',
bulletActiveClass: 'active',
clickable: true
}
});
})
// $('.module.facts.swiper-container:not(.initiated)').each(function (index, element) {
// if ($(element).find('.fact').length < 2) {
// return;
// }
// var slider = new Swiper(element, {
// 'direction': 'horizontal',
// 'loop': true,
// 'autoplay': false,
// 'paginationClickable': true,
// 'slideClass': 'fact',
// 'slideActiveClass': 'active',
// 'bulletClass': 'bullet',
// 'bulletActiveClass': 'active',
// 'pagination': $(element).find('.pagination')
// });
// $(element).find('.pagination').css('display', 'inline-block');
// $(element).addClass('initiated');
// });
}
// ——————————————————————————————————————————————————
document.addEventListener('DOMContentLoaded', init);
})();