MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. スライダー/カルーセル

スライダー/カルーセル

JavaScript
2024.05.24

スライダー/カルーセルは、

スライダー/カルーセル
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScriptスライダー/カルーセルについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="slider">
      <div class="slider-item">
        <!-- <img src="画像URL" alt="画像が存在しない場合の表示文字" /> -->
        画像1
      </div>
      <div class="slider-item">
        <!-- <img src="画像URL" alt="画像が存在しない場合の表示文字" /> -->
        画像2
      </div>
      <div class="slider-item">
        <!-- <img src="画像URL" alt="画像が存在しない場合の表示文字" /> -->
        画像3
      </div>
    </div>

    <button id="prev">前へ</button>
    <button id="next">次へ</button>

    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  const slider = document.getElementById("slider");
  const slides = slider.getElementsByClassName("slider-item");
  const prevButton = document.getElementById("prev");
  const nextButton = document.getElementById("next");
  let currentIndex = 0;

  // スライドを非表示にする関数
  function hideSlides() {
    for (let i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }
  }

  // 指定されたインデックスのスライドを表示する関数
  function showSlide(index) {
    hideSlides();
    slides[index].style.display = "block";
  }

  // 次のスライドを表示する関数
  function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
  }

  // 前のスライドを表示する関数
  function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
  }

  // 初期表示
  showSlide(currentIndex);

  // ボタンイベントの設定
  nextButton.addEventListener("click", nextSlide);
  prevButton.addEventListener("click", prevSlide);

  // 一定間隔で自動スライド
  setInterval(nextSlide, 5000);
});
#slider {
  position: relative;
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  margin: auto;
}

/* 画像を差し込んだ場合のデザイン */
/* .slider-item {
  display: none;
  text-align: center;
}
.slider-item img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} */

/* 画像を差し込んで以内デザイン */
.slider-item {
  display: none;
  text-align: center;
  font-size: 2em;
  line-height: 300px;
  height: 300px;
}
.slider-item:nth-child(1) {
  background-color: #bfdd9e;
}
.slider-item:nth-child(2) {
  background-color: #56c1db;
}
.slider-item:nth-child(3) {
  background-color: #f4af2b;
}

#prev,
#next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
}
#prev {
  left: 10px;
}
#next {
  right: 10px;
}
#prev:hover,
#next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
出力結果

一定間隔で画像が自動的に切り替わります。前へ・次へボタンで手動で切り替えることもできます。

画像1
画像2
画像3
JavaScript