【JS&CSS】クリックで画像を切り替える（カルーセル）

2024年8月2日

画像をクリックまたは画像に表示された矢印マークをクリックすると、次々と別の画像に切り替わっていく方法を公開します。
自分の学習・メモ用がメインですが、プログラミング学習初心者の参考になればと思います！

実装例とコード

以下の2パターンについて、実装例とコードを公開しています。

画像自体をクリックすると画像が瞬時に切り替わっていくパターン
画像の端に表示された矢印マークをクリックすると、画像がスライドして切り替わっていくパターン（一般に『カルーセル』と呼ばれる）

画像クリックで瞬時に切り替わる

スライドして切り替わる（カルーセル）

（1）画像クリックで瞬時に切り替わる　HTML/CSS/JavaScript コードはこちら

<div class="boxes-container">
  <div class="box box-1"></div>
  <div class="box box-2 hidden"></div>
  <div class="box box-3 hidden"></div>
  <div class="box box-4 hidden"></div>
</div>

事前に表示させたい画像すべてをHTMLに書いておき、最初に表示される画像以外にはhiddenクラス（display: none;）を付けて非表示にしておく。

.boxes-container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  cursor: pointer;
}

.box {
  width: 100%;
  height: 100%;
}

.box-1 {
  background: skyblue;
}

.box-2 {
  background: tomato;
}

.box-3 {
  background: limegreen;
}

.box-4 {
  background: pink;
}

.hidden {
  display: none;
}

HTMLで、非表示にしたい画像に付けたhiddenクラスのdisplayプロパティをnoneにしておく。

const mainBox = document.querySelector('.boxes-container');
const boxes = document.querySelectorAll('.box');
let index = 0;

function boxChange() {
  boxes.forEach(box => {
    box.classList.add("hidden");
  });

  boxes[index].classList.remove("hidden");
}

mainBox.addEventListener('click', () => {
  index++;
  if (index === boxes.length) {
    index = 0;
  }

  boxChange();
});

画像がクリックされたとき、hiddenクラスを付け外しすることで特定の画像のみを表示させる。
変数indexで、今どの画像を表示させているかの情報を保持しておく。

（2）画像がスライドして切り替わる（カルーセル）　HTML/CSS/JavaScript コードはこちら

<div class="carousel-container">
  <div class="carousel">
    <div class="box box-1"></div>
    <div class="box box-2"></div>
    <div class="box box-3"></div>
    <div class="box box-4"></div>
  </div>
  <button id="lt"><</button>
  <button id="gt">></button>
</div>

.carousel-container {
  width: 80%;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.carousel {
  width: 100%;
  height: 100%;
  display: flex;
  transition: transform .3s;
}

.box {
  height: 100%;
  min-width: 100%;
}

.box-1 {
  background: skyblue;
}

.box-2 {
  background: tomato;
}

.box-3 {
  background: limegreen;
}

.box-4 {
  background: pink;
}

#lt,
#gt {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 24px;
  padding: 0 6px;
  cursor: pointer;
}

#lt {
  left: 8px;
}

#gt {
  right: 8px;
}

#lt:hover,
#gt:hover {
  opacity: .8;
}

.hidden {
  display: none;
}

「overflow: hidden;」で、carousel-containerから溢れた画像は非表示なる。
「position: relative;」と「position: absolute;」を使って、ボタンの位置を画像の左端中央、右端中央になるよう調整。

const lt = document.getElementById('lt');
const gt = document.getElementById('gt');
const carousel = document.querySelector('.carousel');
const boxes = document.querySelectorAll('.box');
let index = 0;

function updatebtn() {
  lt.classList.remove('hidden');
  gt.classList.remove('hidden');

  if (index === 0) {
    lt.classList.add('hidden');
  }

  if (index === boxes.length - 1) {
    gt.classList.add('hidden');
  }
}

function moveBoxes() {
  const boxWidth = boxes[0].getBoundingClientRect().width;
  carousel.style.transform = `translateX(${-1 * boxWidth * index}px)`;
}

updatebtn();

gt.addEventListener('click', () => {
  index++;
  updatebtn();
  moveBoxes();
});

lt.addEventListener('click', () => {
  index--;
  updatebtn();
  moveBoxes();
});

window.addEventListener('resize', () => {
  moveBoxes();
});

ボタンがクリックされたとき、画像全体を画像1つの幅分だけ左(右)に移動させる。
最初の画像が表示されているときは左側のボタン、最後の画像が表示されているときは右側のボタンにhiddenクラスを付け、ボタンを非表示にする。

一定時間経過で自動的に表示を切り替える方法

クリックではなく、一定時間が経過すると表示が自動的に切り替わっていく実装も可能です。
詳細は以下記事で公開していますので、合わせてご覧ください。

【JS】一定時間ごとに表示内容を変える

【JS&CSS】一定時間毎に表示がフワッと変わる

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。