Carousel 旋轉木馬

Carousel.html

<!--
https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
-->
<style>
  .carousel-container {
    position: relative;
    display: flex;
    align-items: center;

    /* background-image: linear-gradient(45deg, rgba(231, 49, 97, 1) 10%, rgba(236, 107, 34, 1), rgb(182, 163, 70)); 太亮 */
    /* background-image: linear-gradient(#0005, #0008), url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcShoB9hrCeKz6-5edIAjsk5QNhM7r5qfCoqhA&usqp=CAU"); */
    background-image: linear-gradient(#70707055, #8e8b8b88), /* 前面補上一層暗化背景圖片，避免太過突兀 */
      linear-gradient(45deg, rgba(231, 49, 97, 1) 10%, rgba(236, 107, 34, 1), rgb(182, 163, 70));
    width: max-content;
  }

  .carousel-items {
    display: flex;
    overflow: hidden;
    /* width: 100%; 所有商品的寬度 */
    width: max-content;
  }

  .carousel-item {
    width: 100px;
    height: 100px;
    margin: 10px;
    border: 1px solid black;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .carousel-control {
    position: sticky;
    top: 8%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    /* background-color: rgba(0, 0, 0, 0.5); */
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .carousel-control.prev {
    left: 0;
  }

  .carousel-control.next {
    right: 0;
  }

  .carousel-control:hover {
    background-color: rgba(0, 0, 0, 0.6);
    --alpha: 1;
  }

  .carousel-control.prev::before,
  .carousel-control.next::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-width: 3px 3px 0 0;
    border-style: solid;
    width: 12px;
    height: 12px;
  }

  .carousel-control.prev::before {
    transform: translate(-25%, -50%) rotate(-135deg); /* 影響內文的位置 */
    /* border-color: #e5e3e3; 覆蓋之後的箭頭顏色 */
    border-color: rgba(229, 227, 227, var(--alpha, 0.1)); /* 一開始讓他不明顯，等hover之後再去等調整alpha數值 */
  }

  .carousel-control.next::before {
    transform: translate(-75%, -50%) rotate(45deg);
    border-color: rgba(229, 227, 227, var(--alpha, 0.1));
  }
</style>

<div class="carousel-container">
  <!-- <button id="prevBtn">←</button> -->
  <div class="carousel-control prev" id="prevBtn"></div>
  <div class="carousel-items">
    <div class="carousel-item">商品1</div>
    <div class="carousel-item">商品2</div>
    <div class="carousel-item">商品3</div>
    <div class="carousel-item">商品4</div>
    <div class="carousel-item">商品5</div>
  </div>
  <!-- <button id="nextBtn">→</button> -->
  <div class="carousel-control next" id="nextBtn"></div>
</div>

<script>
  document.getElementById('prevBtn').addEventListener('click', function () {
    move(-1)
  });

  document.getElementById('nextBtn').addEventListener('click', function () {
    move(1)
  })

  function move(direction) {
    const itemsContainer = document.querySelector('.carousel-items')
    const items = document.querySelectorAll('.carousel-item')

    if (direction === -1) {
      // itemsContainer.appendChild(items[0])
      /*
      appendChild與append的差異:
        - 接受的參數:
          appendChild 只接受單一節點作為參數。如果你嘗試將多個節點傳遞給 appendChild，它只會附加第一個。
          append 可以接受多個節點和字符串。這意味著你可以同時將多個節點和文本內容添加到父節點。
        - 返回值:
          appendChild 返回被附加的節點。
          append 沒有返回值（返回 undefined）。
        - 瀏覽器支援:
          appendChild 的支援範圍較廣，幾乎所有的主流瀏覽器都支援它。
          append 是較新的方法，可能在一些較舊的瀏覽器中不被支援。
        - 文本內容:
          使用 append，你可以直接將文本內容添加到元素中，無需先創建文本節點。
              ```
              let div = document.createElement('div')
              div.append('Hello', ' World')
              ```
          要在 appendChild 中做到這一點，你需要首先創建一個文本節點。
            ```
            let div = document.createElement('div')
            let textNode1 = document.createTextNode('Hello')
            let textNode2 = document.createTextNode(' World')
            div.appendChild(textNode1);
            div.appendChild(textNode2);
            ```
      **/
      // 直接利用append的特性就能移動節點: 當你使用 append（或 appendChild）方法將一個已存在於文檔中的節點添加到另一個位置時，該節點會從它原先的位置被移除，並添加到新的位置。節點不會被複製或克隆，而是在DOM中移動。
      // 因此我們每次都把第一個商品直接放到最後一個去，他就會自動排好了
      itemsContainer.append(items[0])
    } else if (direction === 1) {
      itemsContainer.insertBefore(items[items.length - 1], items[0])
    }
  }
</script>