アニメーションありのカルーセルのサンプル

← →

<div class="carousel-outer">
  <div class="carousel">
    <div class="carousel__section">
      <img src="https://placehold.jp/ccffff/000000/960x540.png?text=Section1">
    </div>
    <div class="carousel__section">
      <img src="https://placehold.jp/ffccff/000000/960x540.png?text=Section2">
    </div>
    <div class="carousel__section">
      <img src="https://placehold.jp/ccffcc/000000/960x540.png?text=Section3">
    </div>
  </div>
  <button class="carousel__button-left">←</button>
  <button class="carousel__button-right">→</button>
</div>

img {
  max-width: 100%;
  height: auto;
}

.carousel-outer {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 960px;
}

.carousel {
  display: flex;
  transform: translateX(0);
  transition: transform 0.5s ease-in-out; /* ← 追加 */
}

.carousel__section {
  min-width: 100%;
}

.carousel__button-left,
.carousel__button-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.carousel__button-left {
  left: 5%;
}

.carousel__button-right {
  right: 5%;
}

let current = 0
const carousel = document.querySelector('.carousel')
const carousels = document.querySelectorAll('.carousel__section')
const total = carousels.length

function showSection() {
  carousel.style.transform = `translateX(${-current * 100}%)`
}

function prevSection() {
  current = current === 0 ? total - 1 : current - 1
  showSection()
}

function nextSection() {
  current = (current + 1) % total
  showSection()
}

const btnLeft = document.querySelector('.carousel__button-left')
const btnRight = document.querySelector('.carousel__button-right')

btnLeft.addEventListener('click', prevSection)
btnRight.addEventListener('click', nextSection)

元記事を表示する