Carousel Image Block v2

Description: custom Carousel Image Block with some options

• lightbox image
• adjust number of columns on desktop, mobile
• easily add text beside Carousel
• ..
• view demo – password: abc

#1. Install Code

First, hover on Page where you want to add Carousel > Click Gear icon

Click Advanced > Paste this code

<!-- Carousel Block v2 @tuanphan -->
<style>
:root {
  --columns-mobile: 3;
  --columns-desktop: 4;
  --img-height-mobile: 200px;
  --img-height-desktop: 250px;
  --img-gap: 10px;
  --img-round: 0px;
  --arrow-round: 50%;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="https://code.beaverhero.com/markdown/carouselv2.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.beaverhero.com/markdown/carouselv2.js"></script>
<!-- END Carousel Block v2 @tuanphan -->

Edit page where you want to add Carousel > Add a Markdown Block

Paste all Image URLs

#2. Customize

All style options here (Line 04 to Line 10)

--columns-mobile: 3;
 --columns-desktop: 4;
 --img-height-mobile: 200px;
 --img-height-desktop: 250px;
 --img-gap: 10px;
 --img-round: 0px;
 --arrow-round: 50%;

#2.1. Enable Lightbox

Add this code under main code

<!-- Carousel Block v2 - Lightbox -->
<style>.tp-lightbox-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgb(0 0 0 / .95);z-index:99999;opacity:0;transition:opacity 0.3s ease}.tp-lightbox-overlay.active{display:flex;justify-content:center;align-items:center;opacity:1}.tp-lightbox-container{position:relative;max-width:90%;max-height:90%;display:flex;align-items:center;justify-content:center}.tp-lightbox-image{max-width:100%;max-height:90vh;object-fit:contain;cursor:default}.tp-lightbox-close{position:absolute;top:20px;right:20px;color:#fff;cursor:pointer;background:none;border:none;z-index:100000;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.tp-lightbox-close svg{width:20px;height:20px;stroke:#fff;stroke-width:2}.tp-lightbox-arrow{position:absolute;top:50%;transform:translateY(-50%);background-color:rgb(255 255 255 / .8);border:none;cursor:pointer;z-index:100000;padding:.5rem;border-radius:var(--arrow-round,50%);width:40px;height:40px;display:flex;align-items:center;justify-content:center;transition:background-color 0.3s ease}.tp-lightbox-arrow:hover{background-color:rgb(255 255 255)}.tp-lightbox-arrow svg{width:12px;height:16px;stroke:#000;stroke-width:2}.tp-lightbox-arrow.prev{left:10px}.tp-lightbox-arrow.next{right:10px}.tp-swiper-container .swiper-slide img{cursor:zoom-in!important}@media (max-width:767px){.tp-lightbox-arrow.prev{left:10px}.tp-lightbox-arrow.next{right:10px}.tp-lightbox-close{top:10px;right:10px}}
</style><script>window.TPLightbox={overlay:null,currentIndex:0,images:[],init:function(){if(document.getElementById('tp-lightbox'))return;const lightboxHTML=`<div id="tp-lightbox" class="tp-lightbox-overlay"><button class="tp-lightbox-close"><svg viewBox="0 0 40 40"><path d="M4.3,35.7L35.7,4.3"></path><path d="M4.3,4.3l31.4,31.4"></path></svg></button><button class="tp-lightbox-arrow prev"><svg class="caret-left-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline></svg></button><div class="tp-lightbox-container"><img class="tp-lightbox-image" src="" alt=""></div><button class="tp-lightbox-arrow next"><svg class="caret-right-icon--small" viewBox="0 0 9 16"><polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline></svg></button></div>`;document.body.insertAdjacentHTML('beforeend',lightboxHTML);this.overlay=document.getElementById('tp-lightbox');this.attachEvents();this.attachToExistingCarousels()},attachEvents:function(){const closeBtn=this.overlay.querySelector('.tp-lightbox-close');const prevBtn=this.overlay.querySelector('.tp-lightbox-arrow.prev');const nextBtn=this.overlay.querySelector('.tp-lightbox-arrow.next');closeBtn.addEventListener('click',()=>this.close());this.overlay.addEventListener('click',(e)=>{if(e.target===this.overlay||e.target.classList.contains('tp-lightbox-container')){this.close()}});prevBtn.addEventListener('click',(e)=>{e.stopPropagation();this.navigate(-1)});nextBtn.addEventListener('click',(e)=>{e.stopPropagation();this.navigate(1)});document.addEventListener('keydown',(e)=>{if(!this.overlay.classList.contains('active'))return;switch(e.key){case 'Escape':this.close();break;case 'ArrowLeft':this.navigate(-1);break;case 'ArrowRight':this.navigate(1);break}})},attachToExistingCarousels:function(){if(!window.MarkdownCarousel)return;const markdownBlocks=document.querySelectorAll('.markdown-block');markdownBlocks.forEach(markdownBlock=>{const wrapper=markdownBlock.querySelector('.tp-swiper-wrapper');if(!wrapper)return;const images=markdownBlock.querySelectorAll('.swiper-slide img');const imageUrls=Array.from(images).map(img=>img.src);if(window.MarkdownCarousel.attachLightboxEvents){window.MarkdownCarousel.attachLightboxEvents(markdownBlock,imageUrls)}})},open:function(imageSrc,index,images){if(!this.overlay)this.init();this.currentIndex=index;this.images=images;const lightboxImage=this.overlay.querySelector('.tp-lightbox-image');lightboxImage.src=imageSrc;setTimeout(()=>{this.overlay.classList.add('active')},10);document.body.style.overflow='hidden'},close:function(){this.overlay.classList.remove('active');document.body.style.overflow=''},navigate:function(direction){this.currentIndex+=direction;if(this.currentIndex<0){this.currentIndex=this.images.length-1}else if(this.currentIndex>=this.images.length){this.currentIndex=0}
const lightboxImage=this.overlay.querySelector('.tp-lightbox-image');lightboxImage.style.opacity='0';setTimeout(()=>{lightboxImage.src=this.images[this.currentIndex];setTimeout(()=>{lightboxImage.style.opacity='1'},50)},200)}};if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',()=>window.TPLightbox.init())}else{window.TPLightbox.init()}</script>

Result