2021-05-11

【JavaScript】フワッと切り替え表示するスライダーを作成する方法。

JavaScript,プログラミング

こんにちは、ダイキです。
今回は、JavaScript でフワッと切り替え表示するスライダーを作成してみます。
jQuery や slick を使う必要はないですね。

HTMLです。【JavaScript】フワッと表示するスライダーを作成する方法。


<!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="style.css">
</head>

<body>
  <div class="slide">
    <img src="images/macaron01.png">
    <img src="images/macaron02.png">
    <img src="images/macaron03.png">
  </div>


  <script src="script.js"></script>
</body>

</html>

CSSです。【JavaScript】フワッと表示するスライダーを作成する方法。


body {
  width: 500px;
  margin: 100px auto 0;
}

.slide {
  position: relative;
  height: 400px;
}
.slide img {
  position: absolute;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: all 1s ease-in-out;
}

JavaScriptです。【JavaScript】フワッと表示するスライダーを作成する方法。


// フワッとスライドさせる
window.addEventListener('load', () => {
  viewSlide(".slide img");
});

function viewSlide(className, slideNo = -1) {
  let imgArray = document.querySelectorAll(className);

  if (slideNo >= 0) {
    //初回以外は現在のスライドを消去
    imgArray[slideNo].style.opacity = 0;
  };

  slideNo++;
  if (slideNo >= imgArray.length) {
    slideNo = 0; //次のスライドがなければ最初に戻る
  };
  
  imgArray[slideNo].style.opacity = 1;
  setTimeout(() => {
    viewSlide(className, slideNo);
  }, 3000);
};