To make Summary Carousel style like this.
#1. First, edit Summary Block > Choose Carousel
#2. Connect a Blog Page
#3. Enter word: firstbig in Header Text
#4. Use this code to Custom CSS
/* First big carousel style */
.tp-wrap{max-width:1100px;margin:0 auto;padding:24px}.tp-carousel{position:relative}.tp-track{display:flex;gap:24px;overflow:hidden;align-items:center}.tp-item{flex:0 0 auto;width:280px;height:200px;border-radius:0;overflow:hidden;background:#f4f4f4}.tp-item:first-child{width:480px;height:320px}.tp-item img{width:100%;height:100%;object-fit:cover;display:block}.tp-cap{margin-top:10px;color:#6e6e6e;letter-spacing:.2px;text-align:left}.tp-controls{position:absolute;top:10%;left:500px;transform:translateY(-50%);display:flex;gap:12px}.tp-btn{border:none!important;background:#fff;border-radius:999px;padding:6px 12px;cursor:pointer}.summary-header-text,.summary-item-list{opacity:0}@media (max-width:767px){.tp-track{gap:16px}.tp-item{width:58vw;height:38vw}.tp-item:first-child{width:80vw;height:52vw}.tp-controls{left:0;right:0;justify-content:flex-end}.tp-cap{font-size:14px}}
#5. Use this code to Page Header Injection (page where you use Summary Carousel)
<!-- Summary Carousel first big item - @tuanphan - 17-09-2025 -->
<script>const TPCarouselConverter={templates:{carousel:{container:`<section class="tp-wrap"><div class="tp-carousel"><div class="tp-track"></div><div class="tp-controls"><button class="tp-btn tp-prev" aria-label="Previous">←</button><button class="tp-btn tp-next" aria-label="Next">→</button></div><p class="tp-cap"><em><a href="#"></a></em></p></div></section>`,item:`<div class="tp-item" data-caption="{blogTitle}" data-url="{blogUrl}" onclick="window.location.href='{blogUrl}'">
<img src="{blogImage}" alt="{blogTitle}"></div>`}},initialize(){document.addEventListener('DOMContentLoaded',()=>{setTimeout(()=>{this.convertSummaryBlocks()},1000)})},convertSummaryBlocks(){const summaryBlocks=document.querySelectorAll('.summary-block-wrapper');summaryBlocks.forEach((block,index)=>{const headerText=block.querySelector('.summary-header-text');if(headerText&&headerText.textContent.includes('firstbig')){this.convertToCarousel(block)}})},convertToCarousel(summaryBlock){const headerElement=summaryBlock.querySelector('.summary-heading');const pagerElement=summaryBlock.querySelector('.summary-carousel-pager');const listContainer=summaryBlock.querySelector('.summary-item-list-container');if(headerElement)headerElement.style.display='none';if(pagerElement)pagerElement.style.display='none';if(!listContainer){return}
const summaryItems=summaryBlock.querySelectorAll('.summary-item');if(summaryItems.length===0){return}
const blogData=this.extractBlogDataFromItems(summaryItems);const template=this.templates.carousel;listContainer.innerHTML=template.container;this.populateCarouselItems(listContainer,blogData);this.initializeTPCarousel(listContainer)},extractBlogDataFromItems(summaryItems){const blogData=[];summaryItems.forEach((item)=>{const titleLink=item.querySelector('.summary-title-link');const thumbnailImg=item.querySelector('.summary-thumbnail-image');if(titleLink&&thumbnailImg){blogData.push({blogTitle:titleLink.textContent.trim(),blogUrl:titleLink.getAttribute('href'),blogImage:thumbnailImg.src||thumbnailImg.getAttribute('data-src')||thumbnailImg.getAttribute('data-image')})}});return blogData},populateCarouselItems(element,blogPosts){const track=element.querySelector('.tp-track');if(!track){return}
let htmlOutput='';blogPosts.forEach((post)=>{htmlOutput+=this.templates.carousel.item.replace(/{blogTitle}/g,post.blogTitle).replace(/{blogUrl}/g,post.blogUrl).replace(/{blogImage}/g,post.blogImage)});track.innerHTML=htmlOutput},initializeTPCarousel(element){const track=element.querySelector('.tp-track');const prev=element.querySelector('.tp-prev');const next=element.querySelector('.tp-next');const cap=element.querySelector('.tp-cap em a');if(!track||!prev||!next||!cap){return}
const setCaption=()=>{const first=track.firstElementChild;if(first){const caption=first.getAttribute('data-caption');const url=first.getAttribute('data-url');cap.innerHTML='<em><a href="'+(url||'#')+'">'+(caption||'')+'</a></em>'}};prev.addEventListener('click',()=>{if(track.lastElementChild){track.prepend(track.lastElementChild);setCaption()}});next.addEventListener('click',()=>{if(track.firstElementChild){track.append(track.firstElementChild);setCaption()}});setCaption()}};TPCarouselConverter.initialize();const track=document.querySelector('.tp-track');const prev=document.querySelector('.tp-prev');const next=document.querySelector('.tp-next');const cap=document.querySelector('.tp-cap');function setCaption(){const first=track.firstElementChild;if(first){const caption=first.getAttribute('data-caption');const url=first.getAttribute('data-url');cap.innerHTML='<em><a href="'+(url||'#')+'">'+(caption||'')+'</a></em>'}}
prev.addEventListener('click',()=>{track.prepend(track.lastElementChild);setCaption()});next.addEventListener('click',()=>{track.append(track.firstElementChild);setCaption()});setCaption();</script>
