[JS] 슬라이더 작동부 막힌 부분 코드 풀이

내가 한 예제는 farms의 슬라이드였다. 애초에 나중에 파일을 열어보면서 복습하려고 했기 때문에 주석을 아주 상세히 붙였다.

그 흔적은 이러하다.

// 먼저 이미지가 첫번째에 나오도록 설정해준다. 이건 뒤에 해도 되지만 일단 먼저 써봤다. 당장 생각나는 게 없어서..

index = 0;

// 그 뒤 버튼을 연결해본다 실제 태그 클래스는 각각 prev와 next이다. .이거 빼먹지 말것. 연결해줘야해서 필수임. .빼먹으면 못찾음.

let left = document.querySelector(".prev");
let right = document.querySelector(".next");

//그 다음 옮길 슬라이더에 변수를 정해서 선택해주기로 한다. 각각 하나씩 선택해서 for문으로 돌려버린다 아님 foreach로 돌릴 것이다.

let slide_ = document.querySelectorAll(".slide"); // .이거 빼먹지 말것. .빼먹으면 못찾음.

console.log(slide_.length); //저것들을 옮길 것이기 때문에 잘 인지해서 잘 나오는지 콘솔로 확인 필수. 3개 잘 찍힌거 봤음. 3 딱 숫자 하나만 달랑 찍힘. 원래 이렇게 출력되는듯.

//이벤트를 준다. 클릭할 때 뭔가 작동해야하니까. 앞에 준 변수들을 갖고와서 연결한다...하다가 그만둠! 함수선언을 내가 빨리 해야하기 때문에. 선언한 함수가 저기에 필요하다.

//난 함수 선언을 미리 하겠다. 실은 선생님 코드에서 left.addEventListener("click" 선생님이 넣으신 함수이름) 보고 깜짝 놀라서 막혔음. 얜 어디서 온 애지? html뒤져봐도 없음 어?? 내가 모르는 불변의 함수작동뭔가인가? 하지만 이름이 너무 애매한데...하고 아래쪽 식을 보니 뒤쪽에 함수선언이 되어있음. 난 앞부분 보고 놀라서 멈춘 것임.

function moveleft() {
//1. 우선 함수를 선언했고....뒤에 채운다
//2. 내용은 클릭하는 사건left.addEventListener("click", moveleft);까지만 쓴 뒤에 뒤에 채운다. 사실 이렇게 선언하고 아래에 또 function을 선언하며 그 밑에 식 다 써도 되지만 그럼 코드가 불필요하게 길어진다. 뒤에 채우기로 했다. 그리고 function 기본식은 function 함수이름 (){} 이렇게 써야한다. 기본이라서 덜어낼 수가 없다. 실은 내가 줄여보려다 안되는 걸 알았다.
index--;
if (index < 0) index = slide_.length - 1;

slide_.forEach(function (slide) {
slide.style.transform = translateX(${index * -100}%);
});
};

function moveright() {//함수부터 선언한다. 위와 동일하다.
index++;
if (index >= slide_.length) index = 0;

slide_.forEach(function (slide) {
slide.style.transform = translateX(${index * -100}%);
});

};

// 이제 앞에서 멈춘 이벤트를 선언한 함수를 이용하여 넣어준다.

left.addEventListener("click", moveleft); //이벤트를 넣어준다. 왼쪽. 위에서 선언한 함수가 담겼다.
right.addEventListener("click", moveright); //이벤트를 넣어준다. 오른쪽. 위에서 선언한 생략

//이제 다시 함수 선언식으로 돌아가서 그 안에 내용을 채우면 끝.

html 부분은 이렇다. main 태그 아래다.

배경 이미지 left right
Sale 20% Off
On Everything

Explicabo esse amet tempora quibusdam laudantium,laborum
eaque magnam fugiat hic? Esse dicta aliquid error repudiandae
earum suscipit fugiat molestias, veniam, vel architecto veritatis
delectus repellat modi impedit sequi.
Shop Now
New Arrivals
Check Out Now

Explicabo esse amet tempora quibusdam laudantium,laborum
eaque magnam fugiat hic? Esse dicta aliquid error repudiandae
earum suscipit fugiat molestias, veniam, vel architecto veritatis
delectus repellat modi impedit sequi.
Shop Now
Best Quality
Only Here

Explicabo esse amet tempora quibusdam laudantium,laborum
eaque magnam fugiat hic? Esse dicta aliquid error repudiandae
earum suscipit fugiat molestias, veniam, vel architecto veritatis
delectus repellat modi impedit sequi.
Shop Now

 

 

내가 가장 이해할 수 없는 식은 함수 선언 이후 안쪽 식이었다.

 

🎯 문제의 구간

예: moveleft() 함수 안

index--;
if (index < 0) index = slide_.length - 1;

slide_.forEach(function (slide) {
slide.style.transform = translateX(${index * -100}%);
});

🧠 설명

1. index--;

👉 슬라이더를 왼쪽(이전) 으로 가는 것이니까,
👉 지금 보고 있는 슬라이드 번호(index)를 하나 줄인다.

예: 처음에 index가 0이었다면 → -1이 됨 (그럼 곧장 다음 줄로 넘어감)

2. if (index < 0) index = slide_.length - 1;

👉 index가 0보다 작아지면 (즉, -1이 되면)
👉 슬라이드 끝으로 강제로 이동시킴

즉, 0 → 왼쪽 누름 → -1 → ❌ 존재하지 않음 →
→ slide_.length - 1 (예: 3개면 → 2번 인덱스로 이동)

✅ 이건 양 끝에서 되돌아가게 만드는 순환 구조.

3. slide_.forEach(function (slide) { ... });

👉 슬라이드 전체를 반복 순회하면서
👉 모든 슬라이드의 위치를 한 번에 변경함
(슬라이더는 한 장만 움직이는 게 아니라 전체를 이동시켜야 함)

4. slide.style.transform = \translateX(${index * -100}%);

👉 현재 보여줄 슬라이드를 기준으로
👉 전체를 왼쪽으로 얼마나 밀어낼지 결정

예를 들어:

index 계산 결과 의미
0 0% 첫 번째 슬라이드 보여줌
1 -100% 두 번째 슬라이드 보여줌
2 -200% 세 번째 슬라이드 보여줌
✅ 슬라이드들을 가로로 나란히 정렬한 상태에서
👉 전체 슬라이드 덩어리를 왼쪽으로 -100%, -200%만큼 밀어내는 방식임

📌 요약

index--: 번호 줄이기
if (index < 0): 음수 되면 끝으로 감
forEach: 전체 슬라이드를 반복
transform: 밀어서 보여줄 슬라이드 위치 맞추기

 

 

______________________

// ✅ 초기 인덱스 설정: 첫 번째 슬라이드부터 시작하도록 index를 0으로 초기화
let index = 0;

// ✅ 좌우 버튼 요소 선택 (.prev, .next)
let left = document.querySelector(".prev");
let right = document.querySelector(".next");

// ✅ 슬라이드 전체 요소 선택 (슬라이드 개수 파악 및 이동 대상)
let slide_ = document.querySelectorAll(".slide");
console.log(slide_.length); // 슬라이드 개수 확인용 (예: 3개면 콘솔에 3 출력됨)

// ✅ 왼쪽 버튼 클릭 시 실행되는 함수
function moveleft() {
  index--; // 인덱스를 왼쪽(이전 슬라이드)으로 하나 감소

  // 슬라이더 처음보다 더 왼쪽으로 가려 할 경우 마지막 슬라이드로 이동
  if (index < 0) index = slide_.length - 1;

  // ✅ 전체 슬라이드를 한 번에 이동
  // forEach를 통해 각 슬라이드에 transform 속성을 적용 (X축으로 이동)
  slide_.forEach(function (slide) {
    slide.style.transform = `translateX(${index * -100}%)`;
    // 예: index가 1이면 -100%, 2면 -200% → 슬라이드 이동 효과 발생
  });
}

// ✅ 오른쪽 버튼 클릭 시 실행되는 함수
function moveright() {
  index++; // 인덱스를 오른쪽(다음 슬라이드)으로 하나 증가

  // 슬라이더 마지막보다 더 오른쪽으로 가려 할 경우 처음 슬라이드로 이동
  if (index >= slide_.length) index = 0;

  // 전체 슬라이드에 동일한 transform 적용 → 한 번에 이동하는 방식 유지
  slide_.forEach(function (slide) {
    slide.style.transform = `translateX(${index * -100}%)`;
  });
}

// ✅ 이벤트 연결: 버튼 클릭 시 대응하는 함수 실행
left.addEventListener("click", moveleft);   // 왼쪽 버튼 클릭 시 왼쪽으로 이동
right.addEventListener("click", moveright); // 오른쪽 버튼 클릭 시 오른쪽으로 이동

_______________________