To make a Summary Carousel with features like this.
#1. First, add a Summary Block > Choose Carousel
#2. Add word “scalemiddle” in Header Text
#3. Connect a Blog Page
#4. Use this code to Page Header Injection (page where you use Carousel)
<script>const SummaryCarouselConverter={templates:{carousel:{container:`<section class="blog-carousel-wrap"><style>.blog-carousel-wrap{width:100%;padding:30px 0}.carousel-container{position:relative;width:100%;max-width:800px;margin:0 auto;overflow:hidden;padding-top:30px}.carousel-wrapper{display:flex;transition:transform 0.3s ease;gap:10px}.carousel-item{flex:0 0 calc(33.333% - 7px);transition:all 0.3s ease;position:relative;cursor:pointer}.carousel-item img{width:100%;height:200px;object-fit:cover;border-radius:8px;filter:grayscale(100%);transition:filter 0.3s ease}.carousel-item.center{transform:translateY(-20px);z-index:5}.carousel-item.center img{height:240px;filter:grayscale(0%)}.carousel-text{position:absolute;bottom:10px;left:10px;right:10px;background:rgb(0 0 0 / .7);color:#fff;padding:8px 12px;border-radius:4px;font-size:14px;font-weight:500;opacity:0;transition:opacity 0.3s ease}.carousel-title{margin:0;font-size:14px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;color:#fff!important}.carousel-item.center .carousel-text{opacity:1}.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgb(255 255 255 / .8);border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:10;transition:background 0.3s ease}.carousel-arrow:hover{background:rgb(255 255 255)}.carousel-arrow.left{left:10px}.carousel-arrow.right{right:10px}@media (max-width:768px){.carousel-item{flex:0 0 calc(50% - 5px)}.carousel-item img{height:150px}.carousel-item.center img{height:180px}.carousel-text{font-size:12px;padding:6px 8px}.carousel-title{font-size:12px}}@media (max-width:480px){.carousel-item{flex:0 0 calc(100% - 5px)}}</style><div class="carousel-container"><button class="carousel-arrow left">❮</button><button class="carousel-arrow right">❯</button><div class="carousel-wrapper"></div></div></section>`,item:`<div class="carousel-item" onclick="window.location.href='{blogUrl}'"><img src="{blogImage}" alt="{blogTitle}"><div class="carousel-text"><h3 class="carousel-title">{blogTitle}</h3></div></div>`}},initialize(){document.addEventListener('DOMContentLoaded',()=>{setTimeout(()=>{this.convertSummaryBlocks()},1000)})},convertSummaryBlocks(){console.log('Looking for summary blocks...');const summaryBlocks=document.querySelectorAll('.summary-block-wrapper');console.log('Found summary blocks:',summaryBlocks.length);summaryBlocks.forEach((block,index)=>{const headerText=block.querySelector('.summary-header-text');console.log(`Block ${index}: header text =`,headerText?headerText.textContent:'null');if(headerText&&headerText.textContent.includes('scalemiddle')){console.log('Converting block',index);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');console.log('Elements found:',{header:!!headerElement,pager:!!pagerElement,container:!!listContainer});if(headerElement)headerElement.style.display='none';if(pagerElement)pagerElement.style.display='none';if(!listContainer){console.error('No list container found');return}const summaryItems=summaryBlock.querySelectorAll('.summary-item');console.log('Found summary items:',summaryItems.length);if(summaryItems.length===0){console.error('No summary items found');return}const blogData=this.extractBlogDataFromItems(summaryItems);console.log('Extracted blog data:',blogData);const template=this.templates.carousel;listContainer.innerHTML=template.container;this.populateCarouselItems(listContainer,blogData);this.initializeCarousel(listContainer,blogData.length)},extractBlogDataFromItems(summaryItems){const blogData=[];summaryItems.forEach((item,index)=>{const titleLink=item.querySelector('.summary-title-link');const thumbnailImg=item.querySelector('.summary-thumbnail-image');console.log(`Item ${index}:`,{title:titleLink?titleLink.textContent:'null',img:thumbnailImg?thumbnailImg.src||thumbnailImg.getAttribute('data-src'):'null'});if(titleLink&&thumbnailImg){blogData.push({blogTitle:titleLink.textContent.trim(),blogUrl:titleLink.getAttribute('href'),blogImage:thumbnailImg.src||thumbnailImg.getAttribute('data-src')||thumbnailImg.getAttribute('data-image'),itemNumber:index+1})}});return blogData},populateCarouselItems(element,blogPosts){const carouselWrapper=element.querySelector('.carousel-wrapper');if(!carouselWrapper){console.error('Carousel wrapper not found');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)});carouselWrapper.innerHTML=htmlOutput;console.log('Populated carousel with',blogPosts.length,'items')},initializeCarousel(element,totalItems){if(totalItems===0){console.error('No items to initialize carousel');return}let currentIndex=0;const carouselWrapper=element.querySelector('.carousel-wrapper');const prevBtn=element.querySelector('.carousel-arrow.left');const nextBtn=element.querySelector('.carousel-arrow.right');if(!carouselWrapper||!prevBtn||!nextBtn){console.error('Carousel elements not found');return}const updateCarousel=()=>{const currentItemsPerView=window.innerWidth<=480?1:window.innerWidth<=768?2:3;const translateX=-(currentIndex*(100/currentItemsPerView));carouselWrapper.style.transform=`translateX(${translateX}%)`;const items=element.querySelectorAll('.carousel-item');items.forEach((item,index)=>{item.classList.remove('center');const centerIndex=Math.floor(currentItemsPerView/2);if(index===currentIndex+centerIndex){item.classList.add('center')}})};prevBtn.addEventListener('click',()=>{console.log('Prev clicked, current index:',currentIndex);if(currentIndex>0){currentIndex--;updateCarousel()}});nextBtn.addEventListener('click',()=>{const currentMaxIndex=Math.max(0,totalItems-(window.innerWidth<=480?1:window.innerWidth<=768?2:3));console.log('Next clicked, current index:',currentIndex,'max:',currentMaxIndex);if(currentIndex<currentMaxIndex){currentIndex++;updateCarousel()}});window.addEventListener('resize',updateCarousel);updateCarousel();console.log('Carousel initialized with',totalItems,'items')}};SummaryCarouselConverter.initialize();</script>
<style>
.summary-header-text, .summary-item-list {
opacity: 0;
}
</style>
