// 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; } // Card Slider (swiper) - Container/CardWrapper.html var spv = {slidesPerView}, spb = {spaceBetween}, spg = {slidesPerGroup}, del = {delay}, b576 = {breakpoints576}, b768 = {breakpoints768}, b992 = {breakpoints992}, lop = {loop}, uid = {data.uid}; 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: 1, }, 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 FLIPPER
f:format.raw()}{dataAnimate}>
{card.text.top -> f:format.crop(maxCharacters: '{cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.top -> f:format.html()}
{card.text.top -> f:format.crop(maxCharacters: '{cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.top -> f:format.html()}

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

{card.text.bottom -> f:format.crop(maxCharacters: '{cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.html()} {card.text.bottom -> 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()}