ドットインストール - 3分動画でマスターできるプログラミング学習サービス

main.js

'use strict';
{
  function check(thumnail){
    if(thumnail === thumnails[0]){
        thumnails[0].classList.add('active');
        thumnails[1].classList.remove('active');
        thumnails[2].classList.remove('active');
      }
      if(thumnail === thumnails[1]){
        thumnails[1].classList.add('active');
        thumnails[0].classList.remove('active');
        thumnails[2].classList.remove('active');
      }
      if(thumnail === thumnails[2]){
        thumnails[2].classList.add('active');
        thumnails[0].classList.remove('active');
        thumnails[1].classList.remove('active');
      }
  }

  const thumnails = document.querySelectorAll('.thumnail');
  let mainImage = document.getElementById('main-image');
  const prev = document.getElementById('prev');
  const next = document.getElementById('next');
  let activeIndex = 0;

  thumnails.forEach(thumnail => {
    thumnail.addEventListener('click', ()=> {
      mainImage.src = thumnail.src;
      check(thumnail);
      })
    });

  next.addEventListener('click', ()=> {
    activeIndex++;
    if(activeIndex > 2){
      activeIndex = 0;
    }
    mainImage.src = thumnails[activeIndex].src;
    thumnails.forEach(thumnail => {
      thumnail.classList.remove('active');
    });
    thumnails[activeIndex].classList.add('active');
  });
  
  prev.addEventListener('click', ()=> {
    activeIndex--;
    if(activeIndex < 0){
      activeIndex = 2;
    }
    mainImage.src = thumnails[activeIndex].src;
    thumnails.forEach(thumnail => {
      thumnail.classList.remove('active');
    });
    thumnails[activeIndex].classList.add('active');
  });
}