[miniProjects] 18_Background Slider

18_Background Slider

💻 주제 : 이미지를 슬라이드 하면 배경화면의 이미지가 함께 변경된다.

• 오른쪽, 왼쪽 버튼에 click 메서드를 추가해 이미지가 반복되도록 함.
• setBgToBody() 함수를 만들어 해당 슬라이드 이미지가 배경 이미지와 같도록 설정.

function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
}

• classList의 add, remove 기능으로 active 클래스 활성, 비활성화

const body = document.body;
const slides = document.querySelectorAll('.slide');
const leftBtn = document.getElementById('left');
const rightBtn = document.getElementById('right');

let activeSlide = 0;

rightBtn.addEventListener('click', () => {
  activeSlide++;

  if(activeSlide > slides.length -1) {
    activeSlide = 0;
  }

  setBgToBody();
  setActiveSlide();
})

leftBtn.addEventListener('click', () => {
  activeSlide--;

  if(activeSlide < 0) {
    activeSlide = slides.length - 1;
  }

  setBgToBody();
  setActiveSlide();
})

setBgToBody();

function setBgToBody() {
  body.style.backgroundImage = slides[activeSlide].style.backgroundImage;
}

function setActiveSlide() {
  slides.forEach(slide => {
    slide.classList.remove('active');
  })
  slides[activeSlide].classList.add('active');  
}

• activeSlide 변수는 현재 활성화된 슬라이드의 인덱스를 저장하는 변수. 초기 값은 0으로 설정된다.
• rightBtn과 leftBtn 버튼에는 각각 'click' 이벤트 리스너가 등록되어 있다. 우측 버튼(rightBtn)을 클릭하면 activeSlide 값을 1 증가시키고, 만약 activeSlide가 슬라이드의 개수보다 크다면 activeSlide를 0으로 설정한다. 좌측 버튼(leftBtn)을 클릭하면 activeSlide 값을 1 감소시키고, 만약 activeSlide가 0보다 작다면 activeSlide를 슬라이드의 마지막 인덱스로 설정한다.
• setBgToBody 함수는 현재 activeSlide에 해당하는 슬라이드의 배경 이미지를 body 요소의 배경 이미지로 설정한다.
• setActiveSlide 함수는 모든 슬라이드 요소에서 'active' 클래스를 제거하고, 현재 activeSlide에 해당하는 슬라이드에 'active' 클래스를 추가한다.
• 초기 상태에서 setBgToBody 함수를 호출하여 초기 배경 이미지를 설정한다.