Speckle Banner for Discourse

After Header.html

<header id="speckle-header">
    <div class="header-content active" data-banner-id="1">
        <a href="https://speckle.community/t/august-24-community-standup/12731?u=jonathon" class="link-container">
            <img src="https://speckle.community/uploads/default/original/2X/a/a6e2e76d1a8c6556c5bbaa1af9635dc628504fe7.gif" 
                alt="Signup for Augusts Community Standup" 
                class="link-image" />
        </a>
    </div>
    <div class="header-content" data-banner-id="2">
        <a href="https://speckle.community/t/speak-at-specklecon-2024-call-for-proposals-now-open/12550" class="link-container">
            <img src="https://speckle.community/uploads/default/original/2X/6/6a3dd4dda8b511ba8f9e7c7863851d6351987f1f.gif" 
                alt="Signup for Augusts Community Standup" 
                class="link-image" />
        </a>
    </div> 
</header>

Common.CSS

.link-container {
    display: block;
    width: 100%;
    margin: 1em 0 2em;
    border-radius: 0.75em;
    overflow: hidden;
}

.link-image {
    display: block;
    width: 100%;
    height: auto;
}

#speckle-header {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 18%; /* Adjust based on your desired aspect ratio */
  overflow: hidden;
}

.header-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.header-content.active {
  opacity: 1;
  pointer-events: auto;
}

.header-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Head Script.html

<script type="text/discourse-plugin" version="0.8" >

const BANNER_CYCLE_INTERVAL  = 30000;

(function() {
  let intervalId = null;

  function cycleHeaders() {
    const headers = document.querySelectorAll('#speckle-header .header-content');
    const activeHeader = document.querySelector('#speckle-header .header-content.active');
    
    if (headers.length > 0) {
      let nextIndex = 0;
      if (activeHeader) {
        activeHeader.classList.remove('active');
        nextIndex = (Array.from(headers).indexOf(activeHeader) + 1) % headers.length;
      }
      headers[nextIndex].classList.add('active');
    }
  }

  function startCycling() {
    // Clear any existing interval
    if (intervalId !== null) {
      clearInterval(intervalId);
    }
    // Start a new interval
    intervalId = setInterval(cycleHeaders, BANNER_CYCLE_INTERVAL);
  }

  api.onPageChange((url, title) => {
    startCycling();
  });

  // Initial start
  startCycling();
})();
</script>