【JavaScript】スライダーを作成する方法。コピーOKです。

JavaScript プログラミング

こんにちは、ダイキです。
今回は、JavaScript でスライダーを作成してみます。
Google で検索したら、jQuery のものが多いので、JavaScript にて作成して見ました。
といっても、元ネタがあり、そこから応用しています。

HTMLです。【JavaScript】スライダーを作成する方法。コピーOKです。


<!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 id="arrow-left" class="arrow"></div>
  <div id="arrow-right" class="arrow"></div>

  <div id="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
  </div>

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

CSSです。【JavaScript】スライダーを作成する方法。コピーOKです。


body {
  margin-top: 150px;
}

.slide {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 500px;
}

.slide1 {
  display: none;
  background-image: url(images/macaron01.png);
}

.slide2 {
  display: none;
  background-image: url(images/macaron02.png);
}

.slide3 {
  display: none;
  background-image: url(images/macaron03.png);
}

.arrow{
  cursor: pointer;
  position: absolute;
  margin-top: 230px;
  width: 0;
  height: 0;
  border-style: solid;
}

#arrow-left{
  border-width: 20px 20px 20px 0;
  border-color: transparent gray transparent transparent;
  left: 0;
  margin-left: 30px;
}

#arrow-right{
  border-width: 20px 0 20px 20px;
  border-color: transparent transparent transparent gray;
  right: 0;
  margin-right: 30px;
}

JavaScriptです。【JavaScript】スライダーを作成する方法。コピーOKです。



let sliderImages = document.querySelectorAll('.slide');
let arrowRight = document.getElementById('arrow-right');
let arrowLeft = document.getElementById('arrow-left');
let current = 0;

function startSlide() {
  sliderImages[0].style.display = 'block';
};

arrowRight.addEventListener('click', () => {
  sliderImages[current].style.display = 'none';
  if (current === sliderImages.length - 1) {
    current = -1;
  };
  sliderImages[current + 1].style.display = 'block';
  current++;
});

arrowLeft.addEventListener('click', () => {
  sliderImages[current].style.display = 'none';
  if (current === 0) {
    current = sliderImages.length;
  };
  sliderImages[current - 1].style.display = 'block';
  current--;
});

startSlide();