// Card-flipper rotate on click - CarouselWrapper.html function t3sbCardFlipper() { document.querySelectorAll('.card-flipper').forEach( cf => { cf.classList.add('cardflipper'); cf.classList.remove('card-flipper'); }); document.querySelectorAll('.square-link').forEach( mainflipper => { mainflipper.addEventListener('click', function(flipper) { var frontside = flipper.currentTarget.parentNode.parentNode.parentNode; frontside.style.transform = 'rotateY(180deg)'; var backside = flipper.currentTarget.parentNode.parentNode.parentNode.parentNode.querySelector('.backside'); backside.style.transform = 'rotateY(0deg)'; var cardBody = backside.querySelector('.card-body'); var el = document.createElement('div'); el.classList.add('card-footer','jsfooter','text-center'); el.innerHTML = ''; insertAfter(cardBody, el); backside.querySelector('.square-backlink').addEventListener('click', function(minus) { backside.style.transform = 'rotateY(180deg)'; frontside.style.transform = 'rotateY(0deg)'; if (backside.querySelector('.fa-minus-square') !== null && backside.querySelector('.fa-minus-square') !== '') { if (backside.querySelector('.card-footer').classList.contains('jsfooter')) { backside.querySelector('.card-footer').remove(); } } }); }); }); } function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } // Card-flipper rotate on click - CarouselWrapper.html t3sbCardFlipper() CARD GROUP
f:format.raw()}{dataAnimate}> {card.renderedContent -> f:format.raw()}
GRID CARD (DECK) CARD COLUMNS (MASONRY)
f:format.raw()}{dataAnimate} data-masonry='{"percentPosition": true }'>
{card.renderedContent -> f:format.raw()}
CARD SLIDER (SWIPER JS) #swiper-{data.uid} { width: 100%; height: auto; } #swiper-{data.uid} .card { height: 100% !important; display: block !important; } #swiper-{data.uid} .swiper-button-next, #swiper-{data.uid} .swiper-button-prev { color: white; text-shadow: 1px 1px 2px #000,0 0 25px #000,0 0 5px #000; } #swiper-{data.uid} .swiper-slide, #swiper-{data.uid} .swiper-wrapper { height: auto !important; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } // Card Slider (swiper) - Container/CardWrapper.html var spv = {slidesPerView}, spb = {spaceBetween}, spg = {slidesPerGroup}, del = {delay}, b10 = {breakpoints10}, b576 = {breakpoints576}, b768 = {breakpoints768}, b992 = {breakpoints992}, lop = {loop}, uid = {data.uid}; if(spv === null || spv === '') spv = 1; var swiper = new Swiper("#swiper-{data.uid}", { slidesPerView: spv, spaceBetween: spb, slidesPerGroup: spg, loop: lop, autoplay: { delay: del, }, pagination: { el: ".swiper-paginate", clickable: true, }, navigation: { nextEl: '.next-'+uid, prevEl: '.prev-'+uid, }, breakpoints: { 10: { slidesPerView: b10, }, 576: { slidesPerView: b576, }, 768: { slidesPerView: b768, }, 992: { slidesPerView: b992, }, }, }); var swi = document.getElementById('swiper-{data.uid}'), pag = swi.querySelector('.swiper-paginate'), next = swi.getElementsByClassName('swiper-button-next'), prev = swi.getElementsByClassName('swiper-button-prev'), offset = pag.clientHeight - 5; next[0].style.top = 'calc(50% - '+offset+'px)'; prev[0].style.top = 'calc(50% - '+offset+'px)';
f:format.raw()}{dataAnimate}>
{card.renderedContent -> f:format.raw()}
CARD FLIPPER
f:format.raw()}{dataAnimate}>
{card.bodytext -> f:format.crop(maxCharacters: '{cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.bodytext -> f:format.html()}

{card.backheader -> f:format.raw()}

{card.tx_t3sbootstrap_bodytext -> f:format.crop(maxCharacters: '{cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.tx_t3sbootstrap_bodytext -> f:format.html()}
{card.settings.button.text -> f:format.raw()} {f:translate(key: 'LLL:EXT:t3sbootstrap/Resources/Private/Language/locallang.xlf:more')}

{card.hFa -> f:format.raw()}{card.header -> f:format.raw()}

{card.subheader -> f:format.raw()}

{card.hFa -> f:format.raw()}{card.header -> f:format.raw()}

{card.hFa -> f:format.raw()}{card.subheader -> f:format.raw()}

{card.hFa -> f:format.raw()}{card.header -> f:format.raw()}

{card.subheader -> f:format.raw()}

{card.hFa -> f:format.raw()}{card.header -> f:format.raw()}

{card.hFa -> f:format.raw()}{card.subheader -> f:format.raw()}