4:30초경에 질문이있습니다.

[2024년 출제기준] 웹디자인기능사 실기시험 완벽 가이드(HTML+CSS+JQUERY)

■ 제이쿼리 슬라이드 제작(2) - 슬라이드 구동방식

작성

수정됨

setInterval(function () {
  $('.slide-item').animate({ left: '-1200px' }, function () {
    $('.slide-item').css({ left: 0 });
    $('.slide-item a:first-child').appendTo('.slide-item');
  });
}, 3500);

기존에 자바 개발자라서 코드의 흐름을 파악하는데 약간 어려움이 있습니다. 코드 순서로 따져봤을때, left로 -1200픽셀만큼 이동후 다시 left0으로 돌아오는데,, 이게 약간 이해가 안가는데 이런식이면 제자리 걸음이 아닌가 헷갈리네요. -1200픽셀만큼 이동후 다시 left 0..? left 0에대한 설명이 없어서 뭔지 모르겠네요.

HTML/CSS jquery 웹-디자인

답변 1

인프런 AI 인턴

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

밀꾸님의 질문에 대해 자바스크립트와 제이쿼리를 사용한 슬라이드 애니메이션 기능 구현 관련하여 답변 드리겠습니다.

코드를 통해 구현하고자 하는 로직은 슬라이드 항목이 왼쪽으로 -1200픽셀 만큼 이동한 후, 해당 슬라이드 항목이 마지막으로 이동되어 다시 슬라이드의 시작점으로 오게 만드는 반복 애니메이션입니다.

나아가, 알려주신 코드대로면 실제로는 “제자리 걸음”이 아니라 슬라이드 한 항목이 왼쪽으로 이동한 후 다시 처음으로 돌아가는 형태가 아니라, 단지 화면 밖으로 이동한 것처럼 보이게 만든 뒤 초기 위치로 복귀시키는 트릭처럼 동작하게 할 의도로 보입니다. 일반적으로는 슬라이드가 움직인 후 “첫 번째 항목”이 마지막으로 옮겨지면서 무한 슬라이드 효과를 만듭니다. 다시 말해, 화면 밖으로 이동한 것처럼 보이는 슬라이드 항목이 슬라이드 목록의 마지막으로 이동하여, 사용자로 하여금 슬라이드가 지속적으로 넘어가는 것처럼 보이게 합니다.

현재의 질문과 유사한 문제 해결에 도움이 될 수 있는 예시는 다음과 같습니다:
- 슬라이드가 이상하게 넘어갑니다: 슬라이드가 이상하게 넘어갑니다 질문에서는 슬라이드 구현 관련 질문이 있었고, .slide-items를 이동하고 첫 번째 .slide-item을 마지막으로 이동하는 방식으로 해결하였습니다.

제이쿼리 setInterval 관련 질문: 이 질문에서는 setInterval과 animate 함수를 사용한 예시가 나와 있으며, 슬라이드 애니메이션 구현 방법에 대한 논의가 있습니다.

지식 공유자가 제공한 코드 예시나 답변이 질문의 구체적인 상황에 완벽히 매칭되지 않을 수 있습니다. 다만, 슬라이드를 구현하는 관련 개념에 대해 보다 광범위한 이해를 돕기 위해 일부 관련 링크를 포함하였습니다.

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

밀꾸

질문자

단, 질문에서 언급하신 코드는 약간의 수정이 필요해 보입니다. 구현하려는 로직에서는 .slide-item a:first-child을 .slide-item의 맨 끝으로 추가(appendTo)하는 부분이 포함되어야 합니다. 하지만, 실제로는 .slide-item a:first-child를 .slide-item으로 옮기려고 하고 있는데, 이는 동일한 요소를 자기 자신 내부로 이동하려는 의도로 보이며, 이는 의도한 동작이 아닐 수 있습니다. <- 음 제가 영상을 보고 잘 못 이해한건지 모르겠다만 .. 첫번째 a태그의 요소를 .slide-item의 마지막요소로 이동 시키기 위해서 $('.slide-item a:first-child').appendTo('.slide-item'); 이코드가 아니라는건가요 ?

$('.slide-item:first-child').appendTo('.slide-item'); 이렇게 사용하려고 하면 화면 첫번째 화면에서 두번째 화면으로 이동하려고할때 다시 첫번째 화면으로 돌아옵니다.

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

4:30초경에 질문이있습니다.