eventlistener 질문

이벤트 강의를 듣고 나서 addEventListener를 이용하여 여러 장의 사진이 있으면 슬라이더처럼 하나씩 넘겨서 볼 수 있는 이벤트를 만들 수 있을 것 같아 혼자 코드를 직접 짜봤는데요,

body 부분은 아래처럼 작성하고,

  <body>
    <div class="container">
      <div class="slider" id="slider-01"></div>
      <div class="slider" id="slider-02"></div>
      <div class="slider" id="slider-03"></div>
    </div>
  </body>

css는 아래처럼 작성했고,

.container {
        position: relative;
        width: 660px;
        height: 440px;
        overflow: hidden;
      }
      .slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: contain;
        background-repeat: no-repeat;
        transform: translateX(100%);
      }
      #slider-01 {
        background-image: url(./images/cat/cat-01.png);
        z-index: 3;
      }
      #slider-02 {
        background-image: url(./images/cat/cat-02.webp);
        z-index: 2;
      }
      #slider-03 {
        background-image: url(./images/cat/cat-03.webp);
        z-index: 1;
      }
      .sliderMove {
        transform: translateX(0%);
        transition: 1s;
      }

js코드를 아래와 같이 작성했습니다.

<script>
      window.addEventListener("load", function sliderHandler() {
        const sliderGroup = document.querySelectorAll(".slider");
        let currentSlider;

        function activate(elem) {
          elem.classList.add("sliderMove");
          currentSlider = elem;
        }

        function inactivate(elem) {
          elem.classList.remove("sliderMove");
        }

        for (i = 0; i < sliderGroup.length; i++) {
          if (currentSlider) {
            inactivate(currentSlider);
          }
          activate(sliderGroup[i]);
        }
      });
    </script>

후에 실행을 해보니 사진이 슬라이더처럼 작동이 안돼서요.. 작동이 안되는 이유와 어느 부분을 수정해야 하는지 알려주시면 감사하겠습니다!

혹 수업 내용과는 조금 벗어난 질문을 한 거라면 정말 죄송합니다ㅜㅜ..

안녕하세요, 인프런 AI 인턴입니다.

질문해주신 내용과 유사한 해결 방안을 제공한 정보를 찾았습니다.

1. “일분이 잔상” 질문에 대한 1분코딩의 답변에서는 이미지를 클릭 이벤트로 활성화시키고 비활성화시키는 JavaScript의 사용 사례가 설명되어 있습니다. 해당 예제는 이벤트 리스너를 사용하여 동적인 효과를 주는 방법과 매우 유사합니다. 이 경우에는 이미지 대신 이벤트 위임 방식으로 요소를 추가하고 제거하는 방법이 소개되고 있지만, 귀하의 경우에는 슬라이더 요소를 이동시키는 것과 관련되어 있습니다.

2. “질문 있습니다~” 질문에서 1분코딩의 답변이 제공된 정보로, 특정 조건에 따라 DOM 요소를 활성화 및 비활성화하는 자바스크립트 구문을 변경하는 방법을 포함하고 있습니다. 이 또한 구체적으로 슬라이더를 구현하는 방법을 다루고 있지는 않지만, 조건에 따라 동적인 요소를 제어하는 방법에 대한 일반적인 가이드를 제공합니다.

하지만 직접적으로 슬라이더 작동 방식을 해결하는 구체적 사례나 코드 수정 사항을 찾지 못했습니다. 위 사례들은 접근 방식에 대한 통찰을 제공할 수 있지만, 정확한 수정 사항이나 사진이 슬라이더처럼 작동하지 않는 구체적인 이유에 대해서는 분명히 해결하지 못할 수 있습니다.

코드의 특정 부분에 대한 분석: 여러분의 JavaScript 코드를 살펴보니, 모든 슬라이드를 순회하며 각 슬라이드에 ‘activate’ 함수를 호출하는 로직이 있습니다. 하지만 정해진 시간 간격에 따라 슬라이드를 전환하는 로직이 없으며, ‘inactivate’ 함수는 현재 슬라이더만을 비활성화하도록 되어 있어 이 로직이 어떻게 반복적으로 실행되는지에 대한 구체적인 조치가 누락되어 있습니다.

슬라이더 기능을 올바르게 작동시키려면 setInterval이나 다른 타이밍 함수를 사용하여 일정 시간 간격으로 슬라이더를 전환하는 로직을 추가할 필요가 있습니다. 또한, 현재 슬라이더의 인덱스를 추적하고, 다음 슬라이더로 이동할 때마다 해당 인덱스를 업데이트하여 해당 슬라이더만 활성화하도록 코드를 조정할 필요가 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변