슬라이드 구현하기 - JavaScript

안녕

 

 

오늘은 프로젝트 진행중 구현된 기능중 슬라이드에 대해서 소개해보겠슴다

 

 

 

변수 선언

  let currentSlide = 0;
  const slider = document.querySelector(".slider");
  const slides = document.querySelectorAll(".slide");
  const leftButton = document.querySelector(".slide-button.left");
  const rightButton = document.querySelector(".slide-button.right");

 

 

 

먼저 슬라이드의 현재 위치를 업데이트 할 수 있도록 변수,

슬라이드를 적용시킬 요소(div, button)를 querySelector를 사용하여 클래스 값을 넣어줍니다

 

슬라이드를 업데이트하는 함수

 

  // 슬라이더 위치 업데이트 함수
  const updateSliderPosition = () => {
  
    // clientWidth = 내부 너비 측정
    // 슬라이드 위치를 변경할 때 위치 계산에 필요로 함!
    
    const slideWidth = slides[0].clientWidth;

    // scrollTo = 계산 값 만큼 스크롤 해주는 메소드
    // ex 슬라이드2로 간다면 1 * width 의 값으로 부드럽게 이동
    
    slider.scrollTo({
      left: slideWidth * currentSlide,
      behavior: "smooth",
    });
    updateButton();
  };

 

 

slideWidth에 픽셀 단위로 현재 width 값을 가져오고나서

scrollTo 메소드를 사용하여 x축과 y축에 대한 좌표( left, top)와

스크롤 애니메이션 동작 방식을 지정하는 behavior를 매개변수로 받습니다.

그후 updateButton 함수를 호출해줍니다.

 

 

업데이트 버튼 함수(none, block)

  // 버튼 숨기기 및 나타내기
  const updateButton = () => {
    if (currentSlide === 0) {
      // 첫 번째 슬라이드일 때 왼쪽 버튼 숨기기, 오른쪽 버튼 나타내기
      leftButton.style.display = "none";
      rightButton.style.display = "block";
    } else if (currentSlide === slides.length - 1) {
      // 마지막 슬라이드일 때 오른쪽 버튼 숨기기, 왼쪽 버튼 나타내기
      rightButton.style.display = "none";
      leftButton.style.display = "block";
    } else {
      // 중간 슬라이드일 때 두 버튼 모두 보이기
      leftButton.style.display = "block";
      rightButton.style.display = "block";
    }
  };

 

 

 

currentSlide 변수에 따라서 if문이 실행되는데 

버튼을 숨기고 나타내는 것을 dispaly 속성을

none, block으로 지정하여 간단하게 처리했습니다. 

 

 

좌우측 버튼 클릭에 대한 화살표 함수

  // 좌우측 버튼 클릭 이벤트 리스너
  leftButton.addEventListener("click", () => {
    if (currentSlide > 0) {
      // 0보다 크면 1씩 빼주고 업데이트 함수 호출해서 슬라이드 위치 변경
      currentSlide--;
      updateSliderPosition();
    }
  });

  rightButton.addEventListener("click", () => {
    if (currentSlide < slides.length - 1) {
      // 슬라이드 길이보다 작으면 1씩 더해주고 업데이트 함수 호출해서 슬라이드 위치 변경
      currentSlide++;
      updateSliderPosition();
    }
  });

 

이제 실질적으로 슬라이드를 이동시켜 주는 화살표 함수이며

currentSlide의 값에 따라서 동작하는 코드인데

각 버튼마다 조건문을 사용하여 값을 더해주거나 빼주고 

슬라이드를 업데이트 해주는 함수(변수 선언 다음 소개한 함수)를

호출하여 해당 slide로 scroll 해줍니다

 

개별적인 버튼에 대한 슬라이드 함수

  // 버튼 클릭시 슬라이드 이동
  const moveButtons = document.querySelectorAll('.move-button');
  moveButtons.forEach(moveButton => {
    moveButton.addEventListener('click', (e) => {
      const clickedButton = e.target;
      const classes = clickedButton.classList;

      if (classes.contains('credit')) {
        currentSlide = 0;
      } else if (classes.contains('review')) {
        currentSlide = 1;
      } else if (classes.contains('ott')) {
        currentSlide = 2;
      } else if (classes.contains('genre')) {
        currentSlide = 3;
      }

      updateSliderPosition();
    })
  })

  // 초기 버튼 상태 업데이트
  updateButton();
});

 

그리고 이건 네비게이션 바처럼 해당하는

버튼을 누르면 슬라이드가 되도록 작성된 함수이며

 

같은 클래스를 가진 버튼을 변수에 담아서 각각

forEach문으로 이벤트 리스너가 담긴 화살표 함수를 선언하고

 

각각 버튼이 클릭되면 함수가 실행하여 classes라는 변수에

자바스크립트 DOM API에서 제공하는 속성인 classList로 클래스 목록을 저장하여

 

해당되는 클래스에 따라서 currentSlide의 값을 매긴 뒤

updateSliderPosition 함수를 호출하여 해당 슬라이드로 이동시킵니다.

 

 

오류사항

 

슬라이드 버튼이 none, block되는 과정에서

개별적인 버튼을 사용할 때 마지막 페이지에서 

첫번째 페이지로 이동한 뒤 버튼이 보이지 않았던 오류가 있었는데

 

오류 코드

  // 버튼 숨기기 및 나타내기
  const updateButton = () => {
    if (currentSlide === 0) {
      // 첫 번째 슬라이드일 때 왼쪽 버튼 숨기기
      leftButton.style.display = "none";
    } else if (currentSlide === slides.length - 1) {
      // 마지막 슬라이드일 때 오른쪽 버튼 숨기기
      rightButton.style.display = "none";
    } else {
      // 중간 슬라이드일 때 두 버튼 모두 보이기
      leftButton.style.display = "block";
      rightButton.style.display = "block";
    }
  };

 

기존 코드에서 보면 버튼을 숨기는 코드만 추가 되어있어서

기존 버튼으로 움직였을 때는 오류가 없었지만 한 번에 옮기는 과정에서

block되는 코드가 생략되었기 때문에 좌우측 버튼이 렌더링 되지 않았습니다.

그리하여 숨기는 코드 뿐만 아니라 나타내는 코드까지 적용시켜서 오류를 해결 하였습니다.

 

해결 코드

  // 버튼 숨기기 및 나타내기
  const updateButton = () => {
    if (currentSlide === 0) {
      leftButton.style.display = "none";
      rightButton.style.display = "block";
    } else if (currentSlide === slides.length - 1) {
      rightButton.style.display = "none";
      leftButton.style.display = "block";
    } else {
      leftButton.style.display = "block";
      rightButton.style.display = "block";
    }
  };

 

 

 

https://www.veed.io/view/b6c365b0-d24c-4dc8-b69c-32477f6e333d?panel=share

 

해당링크는 적용된 슬라이드의 화면 녹화 영상입니다!

 

마무리

되게 간단한 문제가 js 파일 전체 로직이 돌아가지 않는 치명적인 오류가

될 수도 있다고 생각하면 아찔하다 지금은 단순히 버튼이 나오지 않는 오류였지만

취업하거나 했을 때 금전적인 부분이 엮여 있는 오류가 날 수도 있으니

지금부터 차근차근 로직에 대해서 고민하고 오류 해결 능력을 길러야 겠다

 

그리고 내일이 프로젝트 발표 날인데 준비 잘해서 좋은 결과 있었으면 좋겠다. 끝

6조 고생 많았어요!! 조금만 더 힘힘