Markdown Carousel with Lightbox

<style>
:root {
  --columns-mobile: 2;
  --columns-desktop: 5;
  --img-height-mobile: 300px;
  --img-height-desktop: 450px;
  --img-gap: 30px;
  --img-round: 0px;
  --nav-width: 28px;
  --nav-height: 28px;
  --nav-image: url(https://static1.squarespace.com/static/67db76703b2759638a900208/t/68dcca66cca0e1015f6e532f/1759300198204/Orb_Parchment.png);
}
.glightbox-container .gbtn.gnext,.glightbox-container .gbtn.gprev,.tp-markdown-nav{background-color:transparent!important;background-image:var(--nav-image)!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important}.tp-markdown-carousel-wrapper{position:relative;width:100%;margin:40px 0;overflow:hidden}.tp-markdown-carousel{width:100%;height:var(--img-height-mobile)}@media (min-width:768px){.tp-markdown-carousel{height:var(--img-height-desktop)}}.tp-markdown-carousel .swiper-slide img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in;transition:transform .3s}.tp-markdown-carousel .swiper-slide img:hover{transform:scale(1.05)}.tp-markdown-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:var(--nav-width);height:var(--nav-height);color:transparent!important;border:none!important;border-radius:0!important;cursor:pointer}.tp-markdown-nav.tp-left{left:10px}.tp-markdown-nav.tp-right{right:10px}.swiper-slide{width:auto!important}section[id*=markdown-carousel] .sqs-block-content{display:none}.glightbox-container .gbtn.gnext,.glightbox-container .gbtn.gprev{width:var(--nav-width)!important;height:var(--nav-height)!important;border-radius:0!important;box-shadow:none!important}.glightbox-container .gbtn.gnext svg,.glightbox-container .gbtn.gprev svg{display:none!important}@media (max-width:767px){.glightbox-container .gbtn.gnext,.glightbox-container .gbtn.gprev{display:flex!important}}.glightbox-container .goverlay{background:rgba(0,0,0,.8)!important}.glightbox-container .gbtn.gclose{position:absolute!important;top:20px!important;right:20px!important;width:40px!important;height:40px!important;padding:0!important;background:0 0!important;border:none!important;border-radius:0!important;box-shadow:none!important;color:#fff!important;font-size:40px!important;font-weight:300!important;line-height:0!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;z-index:100000!important;transition:transform .3s!important}.glightbox-container .gbtn.gclose:hover{transform:scale(1.2)!important}.glightbox-container .gbtn.gclose svg{width:16px!important;height:16px!important;fill:white!important;stroke:white!important}.glightbox-container .gslide-image img{max-width:90vw!important;max-height:90vh!important;width:auto!important;height:auto!important;object-fit:contain!important}
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>
<script>
const tpCarouselConfig = {
  autoplay: false,
  autoplayDelay: 3000,
  speed: 600,
  loop: true
};
document.addEventListener('DOMContentLoaded', initMarkdownCarousel);
document.addEventListener('mercury:load', initMarkdownCarousel);

function initMarkdownCarousel() {
  const section = document.querySelector('section[id*="markdown-carousel"]');
  if (!section) return;

  const markdownBlock = section.querySelector('.sqs-block-markdown');
  if (!markdownBlock || markdownBlock.querySelector('.tp-markdown-carousel-wrapper')) return;

  const links = markdownBlock.querySelectorAll('.sqs-block-content a');
  if (!links.length) return;

  const imageUrls = Array.from(links).map(link => link.href);

  markdownBlock.insertAdjacentHTML('beforeend', `
    <div class="tp-markdown-carousel-wrapper">
      <div class="swiper tp-markdown-carousel">
        <div class="swiper-wrapper">
          ${imageUrls.map((url, i) => `
            <div class="swiper-slide">
              <img src="${url}" alt="Image ${i + 1}" data-index="${i}">
            </div>
          `).join('')}
        </div>
      </div>
      <button class="tp-markdown-nav tp-left">❮</button>
      <button class="tp-markdown-nav tp-right">❯</button>
    </div>
  `);

  new Swiper(markdownBlock.querySelector('.tp-markdown-carousel'), {
    slidesPerView: 2,
    spaceBetween: 30,
    centeredSlides: true,
    loop: tpCarouselConfig.loop,
    speed: tpCarouselConfig.speed,
    navigation: {
      nextEl: markdownBlock.querySelector('.tp-right'),
      prevEl: markdownBlock.querySelector('.tp-left')
    },
    autoplay: tpCarouselConfig.autoplay ? {
      delay: tpCarouselConfig.autoplayDelay,
      disableOnInteraction: false
    } : false,
    breakpoints: {
      768: {
        slidesPerView: 5,
        spaceBetween: 30
      }
    }
  });

  const glightbox = GLightbox({
    elements: imageUrls.map(url => ({
      href: url,
      type: 'image'
    })),
    touchNavigation: true,
    loop: true,
    autoplayVideos: false
  });

  markdownBlock.querySelector('.tp-markdown-carousel').addEventListener('click', function(e) {
    const img = e.target.closest('img');
    if (!img) return;
    const index = imageUrls.findIndex(url => url === img.src);
    if (index === -1) return;
    glightbox.openAt(index);
  });
}
</script>