jQuery를 이용한 슬라이드 애니메이션 02

안녕하세요. 오늘은 필자가 웹디자인기능사 실기를 준비하면서 쓰는 jQuery를 이용한 슬라이드 애니메이션 글 두번째입니다.

포스팅에 앞서 필자도 부족한 부분이 많으니 양해 부탁드립니다.

이 HTML 및 JavaScript 코드 스니펫은 jQuery를 사용하여 간단한 이미지 슬라이더를 구현한 것입니다. 각 구성 요소와 작동 방식을 살펴보겠습니다.

HTML 구조:

<section id="slider">
    <div class="slider__wrap">
        <div class="slider S1"><img src="이미지링크"
                alt=""><span>이미지1</span></div>
        <div class="slider S2"><img src="이미지링크"
                alt=""><span>이미지2</span></div>
        <div class="slider S3"><img src="이미지링크"
                alt=""><span>이미지3</span></div>
    </div>
</section>

• 기사 구조: 높이가 300px이고 배경색이 #ddd인 슬라이더(#slider)가 포함되어 있습니다.
• 슬라이더 래퍼: 슬라이더 항목(div.slider)을 모두 감싸는 .slider-wrap 클래스의 div가 있습니다.

CSS 스타일링:

#slider {
    width: 100%;
    height: 350px;
    background-color: #ccc;
    margin: 0 auto;
    position: relative;
    display: flex;
    justify-content: center;
}
#slider .slider__wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

#slider .slider__wrap .slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

#slider .slider__wrap .slider img {
    width: 100%;
    height: 100%;
}

#slider .slider__wrap .slider span {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px 20px;
    content: '';
    transform: translate(-50%, -50%);
    color: #fff;
    background-color: #000;
}

• 기본 스타일링: #slider, .slider-wrap, 그리고 각각의 .slider 요소에 스타일을 적용합니다.
• 텍스트 위치 지정: 각 .slider 내부의 .text div는 transform 및 top/left 속성을 사용하여 부모 .slider의 가운데에 절대적으로 위치합니다.

JavaScript (jQuery):

<script>
    window.onload = function () {
        let curnetIndex = 0;
        const slider = document.querySelectorAll(".slider");

        slider.forEach(img => img.style.opacity = "0");
        slider[0].style.opacity = "1";

        setInterval(() => {
            let nextIndex = (curnetIndex + 1) % slider.length;

            slider[curnetIndex].style.opacity = "0";
            slider[nextIndex].style.opacity = "1";
            slider.forEach(img => img.style.transition = "all 1s")

            curnetIndex = nextIndex;
        }, 3000);
    }
</script>

• 네비게이션 호버: 네비게이션 항목(li) 위에 마우스를 올리면 드롭다운 메뉴(ul)가 표시되고 숨겨지도록 mouseover 및 mouseout 이벤트를 사용합니다.
• 이미지 슬라이더 로직:
  • 초기화: 첫 번째 .slider 요소를 복제하고 .slider-wrap의 끝에 추가하여 부드러운 루프 효과를 만듭니다.
  • 인터벌 함수: 3초(3000밀리초)마다 실행됩니다.
    • curnetIndex (현재 인덱스)를 증가시켜 현재 슬라이드를 추적합니다.
    • animate를 사용하여 .slider-wrap을 왼쪽으로 이동하여 다음 슬라이드를 표시합니다(marginLeft로 제어).
    • curnetIndex가 3과 같은지 확인합니다(복제된 슬라이드).
      • 첫 번째 슬라이드로 재설정하여 무한 루프를 만듭니다(curnetIndex = 0)(marginLeft: 0로 재설정).

중요 사항:

• 복제: 첫 번째 .slider를 복제하고 끝에 추가하여 마지막 슬라이드에서 첫 번째 슬라이드로 부드럽게 이동합니다.
• 애니메이션: 슬라이드는 .slider-wrap의 marginLeft 속성을 조정하여 애니메이션됩니다.
• 재설정: 마지막 슬라이드에 도달한 후에는 즉시 첫 번째 슬라이드로 재설정되어 계속해서 루프됩니다.

이렇게 간단하게 jQuery를 이용해서 슬라이드를 부드럽게 넘기는 애니메이션을 구현했습니다.

오늘도 필자의 부족한 글 읽어주셔서 감사합니다.