artsite/views/banner.ejs

<link rel="stylesheet" href="/stylesheets/banner.css">

<div class="carousel-container">
  <button class="btn-prev">❮</button>
  <div class="carousel-images">
    <div class="item" style="display: flex; flex-direction: row; justify-content: center; align-items: center;">
      <img width="50%" src="https://pcoloring.com/thumbs/coloring-page/page/480/5d8898684278e31afd9b6968.jpeg"
        alt="<%= translate.cuteCat[lang] %> <%= translate.printableColoringPage[lang]%>">
      <div style="padding-right: 60px;">
        <h1>
          <%= translate.cuteCat[lang] %>
        </h1>
        <p class="cat-description">
          <%= translate.cuteCatDescription[lang] %>
        </p>
        <a href="/play/5d8898684278e31afd9b6968" class="carousel-play-btn">
          <%= translate.play[lang] %>
        </a>
      </div>
    </div>

    <div class="item" style="display: flex; flex-direction: row; justify-content: space-evenly; align-items: center;">
      <div>
        <h1>
          <%= translate.daily[lang] %>
        </h1>
        <div style="font-weight: bold; font-size: 20px; color: #aaa; padding-bottom: 20px;">2025/01/19</div>
        <a href="/play/6783978993b021143d362277" class="carousel-play-btn">
          <%= translate.play[lang] %>
        </a>
      </div>
      <img width="40%" src="https://pcoloring.com/thumbs/coloring-page/page/480/6783978993b021143d362277.jpeg"
        alt="<%= translate.daily[lang] %> <%= translate.printableColoringPage[lang]%>"">
    </div>

    <div class=" item" style="position: relative; display: inline-block;">
      <img width="100%" src="https://pcoloring.com/res/coloring/album_cover/720/661cf6deaae27d6dda120bcc.jpeg"
        alt="<%= translate.coloringPageAlbum[lang] %>: <%= translate.cuteKids[lang] %>">
      <h3 style="position: absolute; top: 20px; left: 20px; color:#ccc; ">
        <%= translate.coloringPageAlbum[lang] %>
      </h3>
      <h1 style="position: absolute; top: 40px; left: 20px; color:white; ">
        <%= translate.cuteKids[lang] %>
      </h1>
    </div>

    <div class="item" style="position: relative; display: inline-block;">
      <img width="100%" src="https://pcoloring.com/res/coloring/album_cover/720/670e26713562c348e1b64db0.jpeg"
        alt="<%= translate.coloringPageAlbum[lang] %>: <%= translate.animalsHappyTime[lang] %>">
      <h3 style="position: absolute; top: 20px; left: 20px; color:#ccc; ">
        <%= translate.coloringPageAlbum[lang] %>
      </h3>
      <h1 style="position: absolute; top: 40px; left: 20px; color:white; ">
        <%= translate.animalsHappyTime[lang] %>
      </h1>
    </div>

  </div>
  <button class="btn-next">❯</button>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const carouselImages = document.querySelector('.carousel-images');
    const items = document.querySelectorAll('.carousel-images .item');
    const prevButton = document.querySelector('.btn-prev');
    const nextButton = document.querySelector('.btn-next');
    let currentIndex = 0;

    function showItem(index) {
      if (index >= items.length) {
        currentIndex = 0;
      } else if (index < 0) {
        currentIndex = items.length - 1;
      } else {
        currentIndex = index;
      }
      const offset = -currentIndex * 100; // 每张图片占100%宽度
      carouselImages.style.transform = `translateX(${offset}%)`;
    }

    prevButton.addEventListener('click', function () {
      showItem(currentIndex - 1);
    });

    nextButton.addEventListener('click', function () {
      showItem(currentIndex + 1);
    });
  });

</script>