jQuery를 이용해서 슬라이드 화면 전환

jQuery 를 이용해서 슬라이드 화면 전환 SCRIPT 짜기!

animate 을 이용하기

전체 코드

let currentIndex = 0;
        $(".slider_wrap").append($(".slider").first().clone(true));

        setInterval(() => {
            currentIndex++;      
            $(".slider_wrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600);

            if (currentIndex == 3) {   
                setTimeout(() => {
                    $(".slider_wrap").animate({ marginLeft: 0 }, 0);
                    currentIndex = 0;    
                }, 700)
            }
        }, 3000);

전체적인 구조

• 이미지 슬라이더는 여러 개의 이미지 (.slider) 가 수평으로 나열되어 있고, 이들을 감싸고 있는 컨테이너 (.slider_wrap) 를 통해 한 번에 하나의 이미지만 보여주는 구조입니다. 사용자는 이미지들이 자동으로 전환되는 것을 볼 수 있습니다.
  

---

코드 분석

변수 선언

let currentIndex = 0;

• currentIndex 변수는 현재 보여지고 있는 이미지의 인덱스를 나타냅니다. 이 예시에서는 첫 번째 이미지부터 시작하므로 0으로 초기화합니다.
  

첫 번째 이미지를 복사하여 마지막에 추가

$(".slider_wrap").append($(".slider").first().clone(true));

• $(“.slider”).first().clone(true) 는 첫 번째 이미지 (.slider) 를 복제합니다. clone(true) 메서드는 이벤트 핸들러까지 복제하도록 합니다.
  

• 이 복제된 이미지는 .slider_wrap 요소의 마지막에 추가됩니다 (append) . 이는 무한 슬라이드 효과를 구현하기 위함입니다. 사용자가 마지막 이미지를 넘어설 때 첫 번째 이미지로 부드럽게 전환되는 효과를 만들기 위해 사용됩니다.
  

이미지 전환을 위한 setInterval 함수

setInterval(() => {
    currentIndex++;
    $(".slider_wrap").animate({ marginLeft: -currentIndex * 100 + "%" }, 600);

    if (currentIndex == 3) {
        setTimeout(() => {
            $(".slider_wrap").animate({ marginLeft: 0 }, 0);
            currentIndex = 0;
        }, 700)
    }
}, 3000);

• setInterval 함수는 주어진 함수를 매 3000밀리초(3초)마다 반복 실행합니다. 이는 이미지가 자동으로 전환되도록 합니다.
  

• currentIndex++ 는 현재 인덱스를 1씩 증가 시켜 다음 이미지로 전환합니다.
  

• $(“.slider_wrap”).animate({ marginLeft: -currentIndex * 100 + “%” }, 600); 는 .slider_wrap 의 marginLeft 를 조정하여 이미지를 왼쪽으로 이동시키는 애니메이션을 실행합니다.
  각 이미지는 100%의 너비를 차지하므로, -currentIndex * 100 + “%” 계산을 통해 적절히 이동시킵니다.
  

• if (currentIndex == 3) 조건문은 마지막 이미지에 도달했을 때 체크 합니다. 이 예시에서는 이미지가 4개라고 가정(0부터 시작하므로 인덱스 3이 마지막)합니다.
  

• 만약 마지막 이미지에 도달하면, setTimeout 함수를 사용하여 700밀리초 후에 .slider_wrap의 marginLeft을 0으로 설정하고 currentIndex를 0으로 초기화 합니다. 이는 슬라이더를 첫 번째 이미지로 “빠르게” 되돌리는 효과를 만듭니다. animate 함수에서 지정한 지속 시간이 0이기 때문에, 이 변화는 즉각적으로 발생합니다.
  

변수 선언 으로만 해보기

$(function () {
            let currentIndex = 0;

            setInterval(() => {
                let nextIndex = (currentIndex + 1) % 3

                $(".slider").eq(currentIndex).fadeOut(1000)
                $(".slider").eq(nextIndex).fadeIn(1000)

                currentIndex = nextIndex
            }, 1000)
        })

전체적인 구조

• 이 코드는 jQuery 를 사용하여 간단한 이미지 슬라이더 기능을 구현한 예시입니다. 이미지 슬라이더는 여러 이미지 중 하나씩 순차적으로 보여주는 컴포넌트입니다. 이 코드는 특정 시간 간격(1초)마다 이미지가 전환되도록 설정 되어 있습니다.
  

코드 분석

jQuery 준비 핸들러

$(function () {};)

• 이 구문은 jQuery의 준비 핸들러입니다. 문서가 완전히 로드되고 준비된 후에 이 안에 있는 함수가 실행됩니다. 이는 $(document).ready()의 축약형입니다.
  

변수 선언

let currentIndex = 0;

• currentIndex 변수는 현재 보여지고 있는 슬라이더 이미지의 인덱스를 저장합니다. 초기값은 0으로, 첫 번째 이미지를 가리킵니다.
  

setInterval 함수

setInterval(() => {})

• setInterval 함수는 주어진 함수를 매개변수로 받은 시간 간격(1000밀리초, 즉 1초)마다 반복해서 실행합니다. 이 예제에서는 1초마다 슬라이더의 이미지를 전환하는 기능을 수행합니다.
  

다음 인덱스 계산

let nextIndex = (currentIndex + 1) % 3

• nextIndex 는 다음에 보여줄 이미지의 인덱스를 계산합니다. (currentIndex + 1) % 3 연산을 통해, 인덱스가 0, 1, 2 순으로 순환 하게 됩니다. % 3은 인덱스가 2를 초과하지 않도록 합니다 (이미지가 총 3개라고 가정).
  

현재 이미지 숨기기

$(".slider").eq(currentIndex).fadeOut(1000)

• $(“.slider”).eq(currentIndex) 는 클래스 이름이 slider 인 요소 중에서 currentIndex 에 해당하는 요소를 선택합니다. .fadeOut(1000) 메서드는 해당 요소를 1초 동안 서서히 숨깁니다.
  

다음 이미지 보이기

$(".slider").eq(nextIndex).fadeIn(1000)

• $(“.slider”).eq(nextIndex) 는 다음에 보여줄 이미지를 선택합니다. .fadeIn(1000) 메서드는 해당 요소를 1초 동안 서서히 나타나게 합니다.
  

인덱스 업데이트

currentIndex = nextIndex

• currentIndex 변수를 nextIndex 로 업데이트하여, 다음 반복 때 현재 이미지로 사용됩니다.
  

setInterval 및 준비 핸들러 닫기

setInterval(() => {}, 1000)

• setInterval 의 두 번째 인자로 1000을 전달하여, 반복적인 함수 호출 간격을 1초로 설정합니다. 그리고 jQuery의 준비 핸들러를 닫습니다.