【javascript】prev, nextボタンをそなえたイメージスライダー(Image Slider)の作り方

投稿日 : 2022年08月03日更新日 :

イメージスライダー
HTML
CSS
javascript
コード全体

イメージスライダー

以下のようなイメージスライダーのコードを紹介します。

HTML

<div class="slider">
  <div class="images"></div> <!-- imgタグをここに生成 -->
  <div onclick="side_slide(-2)" class="slide left">  <!-- 左端の一つ戻るボタン -->
    <span class="fas fa-angle-left"></span>
  </div>
  <div onclick="side_slide(0)" class="slide right">  <!-- 右端の一つ進むボタン -->
    <span class="fas fa-angle-right"></span>
  </div>
  <div class="btm-sliders"></div> <!-- 下の丸いボタンをここに生成 -->
</div>

CSS

.slider {
  width: 100%;
  max-width: 600px;
  aspect-ratio: 3 /2; /* 縦横比でレスポンシブ */
  overflow: hidden;
  position: relative;
  margin: 0 auto 30px;
}
.slider .images {
  width: 100%;
  position: relative;
  margin: 0 auto;
  transition: all 1s ease;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 3 /2; /* 縦横比でレスポンシブ */
}
.images img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}
img:nth-of-type(1) {
  z-index: 99;
}
img.active {
  z-index: 100;
}
img.next {
  transform: translateX(100%);
  animation: ani 3s ease infinite;
  z-index: 1000;
}
@keyframes ani {   /* 画像が左からスライドするアニメーション */
  80% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
/* 下の丸いボタン */
.btm-sliders {   
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  transform: translateX(-50%);
  z-index: 10000;
}
.btm-sliders span {
  height: 20px;
  width: 20px;
  border: solid 2px #fff;
  border-radius: 50%;
  margin: 0 3px;
  cursor: pointer;
  z-index: 10000;
}
.btm-sliders span:nth-of-type(1) {
  background: rgba(255, 255, 255, 0.5);
}
/* 左右端のボタン */
.slider .slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  border: solid 1px #fff;
  background: rgba(255, 255, 255, 0.1);
  cursor: pointer;
  z-index: 10000;
}
.slider .slide:hover {
  background: rgba(255, 255, 255, 0.5);
}
.slide span {
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}
.slider .right {
  right: 0;
}

javascript

画像とHTMLの生成

// imgタグを生成する要素
const images = document.querySelector(".images");  
// 下の丸いボタンを生成する要素
const btnSliders = document.querySelector(".btm-sliders");  
// 画像のURL
const imgContents = [ 
  "https://gxy-life.com/images/blog/202102/4 (3).JPG",
  "https://gxy-life.com/images/blog/202102/1h_01.JPG",
  "https://gxy-life.com/images/blog/202103/4 (5).JPG",
  "https://gxy-life.com/images/blog/202103/4 (11).JPG",
  "https://gxy-life.com/images/blog/202103/5 (9).JPG",
  "https://gxy-life.com/images/blog/202104/3 (3).JPG",
  "https://gxy-life.com/images/blog/202104/4 (4).JPG",
  "https://gxy-life.com/images/blog/202101/4 (10).JPG",
  "https://gxy-life.com/images/blog/202108/4%20(2).JPG",
  "https://gxy-life.com/images/blog/202107/2%20(3).JPG",
  "https://gxy-life.com/images/blog/202102/3%20(2).JPG",
  "https://gxy-life.com/images/blog/202103/4%20(6).JPG",
  "https://gxy-life.com/images/blog/202108/5.jpg",
];
// 画像をシャッフルする関数
function random(array, num) {
  var a = array;
  var t = [];
  var r = [];
  var l = a.length;
  var n = num < l ? num : l;
  while (n-- > 0) {
    var i = (Math.random() * l) | 0;
    r[n] = t[i] || a[i];
    --l;
    t[i] = t[l] || a[l];
  }
  return r;
}
// シャッフルしたものをshuffledImgに格納
const shuffledImg = random(imgContents, 8);
// HTMLの生成
for (let i = 0; i < shuffledImg.length; i++) {
  const element = shuffledImg[i];
  const imgTag = document.createElement("img");
  const spanTag = document.createElement("span");
  if (i === 0) {
    imgTag.classList.add("active");
  } else if (i === 1) {
    imgTag.classList.add("next");
  }
  imgTag.src = element;
  imgTag.classList.add("img");
  images.appendChild(imgTag);
  spanTag.setAttribute("onclick", `btm_slide(${i + 1})`);
  btnSliders.appendChild(spanTag);
}

参考

【javascript】属性を設定(setAttribute)、取得(getAttribute)、確認(hasAttribute)する

【javascript】シャッフルする関数を作り、配列の中身をシャッフルさせる方法

スライダーとクリック時の処理

const img = document.querySelectorAll(".slider .images img");
const sliders = document.querySelectorAll(".btm-sliders span");
    
let index = 2;

// 下の丸いボタンの関数
function btm_slide(e) {
  slider((index = e));
}

// 両サイドのボタンの関数
function side_slide(e) {
  slider((index += e));
}

function slider(e) {
  // 最初に全てのクラスを削除
  img.forEach((element) => {
    element.classList.remove("next");
    element.classList.remove("active");
  });
  // eが画像枚数より大きい場合は1
  if (e > img.length) {
    index = 1;
  }
  // indexが画像枚数より大きくなったらindexは1
  if (index > img.length) {
    index = 1;
  }
  // eが1より小さくなったら画像枚数と同じ数値（最大値）に
  if (e < 1) {
    index = img.length;
  }
  // indexが1より小さくなったら画像枚数と同じ数値（最大値）に
  if (index < 1) {
    index = img.length;
  }
  // すべての丸いボタンの背景色を薄くする
  for (i = 0; i < sliders.length; i++) {
    sliders[i].style.background = "rgba(255, 255, 255, 0.1)";
  }
  // indexの数値が画像枚数より小さい時
  if (index < img.length) {
    img[index - 1].classList.add("active");
    img[index].classList.add("next");
    sliders[index - 1].style.background = "rgba(255, 255, 255, 0.8)";
  }
  // indexが画像枚数と同じ数値（最大値）になった時
  if (index == img.length) {
    img[index - 1].classList.add("active");
    sliders[index - 1].style.background = "rgba(255, 255, 255, 0.8)";
    img[0].classList.add("next");
  }
  // indexに1が足される
  index++;
}

// 三秒ごとに画像がスライド
setInterval(slider, 3000);