【JavaScript&CSS】クリックで画像を切り替える(カルーセル)

javascript&CSS-change-images-eyecatch

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

ブラウザはGoogle Chromeを使い、Wordpress上で実装しています。

目次

実装例とコード

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

  1. 画像自体をクリックすると画像が瞬時に切り替わっていくパターン
  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クラスを付け、ボタンを非表示にする。

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

クリックではなく、一定時間が経過すると表示が切り替わっていく実装については以下記事で公開しています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次