HTML Widget - Rotating Banners

<div id="carousel">
  <div class="widget-container widget-container--banner carousel-widget-1 active">
    <div class="widget-placeholder">
      <div>
        <section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
          <div class="sitewidth">
            <div class="col">
              <div class="qa-banner-container banner-container">
                <div class="sitewidth banner-widget__layout carousel-widget-1-background" style="flex-direction: column">
                  <div class="banner-widget__contents" style="padding-bottom: 0px">
                    <div class="text-left custom-left">
                      <h2 class="widget__heading" style="">
                        Header Text Goes Here
                      </h2>
                    </div>
                    <div style="">
                      <p class="text-left custom-left">
                        H2 Text Goes Here
                      </p>
                    </div>
                    <div class="text-left banner-widget__button">
                      <a href="Insert URL Here>Button Text Here</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="widget-container widget-container--banner carousel-widget-2">
    <div class="widget-placeholder">
      <div>
        <section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
          <div class="sitewidth">
            <div class="col">
              <div class="qa-banner-container banner-container">
                <div class="sitewidth banner-widget__layout carousel-widget-2-background" style="flex-direction: column">
                  <div class="banner-widget__contents" style="padding-bottom: 0px">
                    <div class="text-left custom-left">
                      <h2 class="widget__heading" style="">
                        Header Text Goes Here
                      </h2>
                    </div>
                    <div style="">
                      <p class="text-left custom-left">
                        H2 Text Goes Here
                      </p>
                    </div>
                    <div class="text-left banner-widget__button">
                      <a href=”Insert url Here">Button Text Here</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
  <div class="widget-container widget-container--banner carousel-widget-3">
    <div class="widget-placeholder">
      <div>
        <section class="banner qa-banner-container homepage-widget-wrapper widget-container-spacing homepage-widget-wrapper--no-side-margins" style="">
          <div class="sitewidth">
            <div class="col">
              <div class="qa-banner-container banner-container">
                <div class="sitewidth banner-widget__layout carousel-widget-3-background" style="flex-direction: column">
                  <div class="banner-widget__contents" style="padding-bottom: 0px">
                    <div class="text-left custom-left">
                      <h2 class="widget__heading" style="">
                        Header Text Goes Here
                      </h2>
                    </div>
                    <div style="">
                      <p class="text-left custom-left">
                        H2 Text Goes Here
                      </p>
                    </div>
                    <div class="text-left banner-widget__button">
                      <a href="Insert url Here">Button Text Here</a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </div>
</div>

<style>
  .carousel-widget-1-background {
    background: url(Insert Image Here);
    background-position-x: center;
  }
  .carousel-widget-2-background {
    background: url(Insert Image Here;
    background-position-x: center;
  }
  .carousel-widget-3-background {
    background: url(Insert Image Here;
    background-position-x: center;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div
    > div
    > h2 {
    padding-left: 0;
  }

  #carousel > div.widget-container.widget-container--banner {
    height: 310px;
    background-size: cover;
    background-repeat: no-repeat;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div {
    float: left;
  }

  #carousel > div.widget-container.widget-container--banner > div > div > section > div > div > div > div{
    align-items: flex-start;
    height: 310px;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div.banner-widget__contents {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    width: 50%;
    justify-content: center;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div.banner-widget__contents
    > div
    > h2 {
    color: #000;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 47.949px; /* 149.841% */
    margin: 0;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div
    > div
    > p {
    color: #000;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 0;
  }

  #carousel
    > div.widget-container.widget-container--banner
    > div
    > div
    > section
    > div
    > div
    > div
    > div
    > div
    > div.text-left.banner-widget__button.carousel-button {
    max-width: 30%;
    margin: 0;
  }

  div.text-left.banner-widget__button.carousel-button > a {
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    height: 150%;
    margin: 0;
    align-content: center;
  }
  /* Container for the carousel */
  #carousel {
    position: relative;
    width: 100%; /* or set to a specific width */
    height: 310px; /* Adjust based on the height of your banners */
    overflow: hidden;
  }

  /* Make sure each banner takes up 100% width of the container */
  #carousel > div.widget-container--banner {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 310px;
    opacity: 0;
    transition: opacity 2s ease-in-out, left 2s ease-in-out;
  }

  /* The active banner */
  #carousel > div.widget-container--banner.active {
    left: 0;
    opacity: 1;
  }

  /* Optional: Styling for individual banners */
  /*#carousel > div.widget-container--banner img {
    width: 100%;
    height: auto;
    object-fit: cover; Ensure images fill their container without stretching 
   }*/
  #carousel
    > div
    > div
    > div
    > div
    > section.banner.qa-banner-container.homepage-widget-wrapper.widget-container-spacing.homepage-widget-wrapper--no-side-margins {
    height: 310px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .text-left.custom-left {
    max-width: 80%;
  }

  @media only screen and (min-width: 668px) and (max-width: 1000px) {
    #carousel
      > div.widget-container.widget-container--banner
      > div
      > div
      > section
      > div
      > div
      > div
      > div
      > div
      > div
      > p {
      max-width: 70%;
    }
  }
  @media only screen and (max-width: 834px) {
    #carousel
      > div.widget-container.widget-container--banner
      > div
      > div
      > section
      > div
      > div
      > div
      > div
      > div
      > div
      > p {
      color: #000;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
    }
    #carousel
      > div.widget-container.widget-container--banner.carousel-widget-2.active
      > div
      > div
      > section
      > div
      > div
      > div
      > div
      > div
      > div
      > h2 {
      color: #000;
      font-size: 28px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%; /* 171.246% */
    }
  }
  @media only screen and (max-width: 600px) {
    .text-left.custom-left {
      max-width: 75%;
    }
  }
</style>

<script>

  function createCarousel() {
    // Target the widget containers (banners)

    const banners = document.querySelectorAll(
      "#carousel > div.widget-container--banner"
    );
    let currentIndex = 0;
    banners.forEach((banner, index) => {
      banner.classList.remove("active");
      if (index === currentIndex) {
        banner.classList.add("active");
      }
    });

    function showNext() {
      banners[currentIndex].classList.remove("active");
      currentIndex = (currentIndex + 1) % banners.length;
      banners[currentIndex].classList.add("active");
    }
    // Set up an interval to automatically show the next banner every 4 seconds
    setInterval(showNext, 5000); // 5000 milliseconds = 5 seconds
  }
  // comment out bellow to stop carousel and edit the banners
  document.addEventListener("DOMContentLoaded", createCarousel);

</script>