[JAVASCRIPT] 슬라이드 이펙트 (Slider Effect) 04 - 좌측으로 연속 슬라이드

무근본 일반인 2023. 4. 11. 21:15

2023. 4. 11. 21:15

728x90

완성 화면

코드 보기 / CSS

.slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slider__img {                /*이미지가 나타나는(보이는) 영역*/
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
      }
      .slider__inner {              /*이미지가 슬라이드 되는(움직이는) 영역*/
        display: flex;
        flex-wrap: wrap;
        width: 4800px;
        height: 450px;
      }
      .slider {
        position: relative;
        width: 800px;
        height: 450px;
      }

코드 보기 / HTML

 <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider s01"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
                    <div class="slider s02"><img src="./img/sliderEffect03-min.jpg" alt="이미지2"></div>
                    <div class="slider s03"><img src="./img/sliderEffect05-min.jpg" alt="이미지3"></div>
                    <div class="slider s04"><img src="./img/sliderEffect07-min.jpg" alt="이미지4"></div>
                    <div class="slider s05"><img src="./img/sliderEffect09-min.jpg" alt="이미지5"></div>
                </div>
            </div>
        </div>

코드 보기 / JAVASCRIPT

const sliderWrap = document.querySelector(".slider__wrap");
        const sliderImg = sliderWrap.querySelector(".slider__img");
        const sliderInner = sliderWrap.querySelector(".slider__inner");
        const slider = sliderWrap.querySelectorAll(".slider");

        let currentIndex = 0;                   //현재 보이는 (가장 위에 있는) 이미지
        let sliderInterval = 3000;              //다음 이미지로 넘어가는 간격의 시간
        let sliderCount = slider.length;        //전체 이미지의 총 수
        let sliderWidth = sliderWrap.querySelector(".slider__img").offsetWidth;            //이미지 width 값
        let sliderClone = sliderInner.firstElementChild.cloneNode(true);        //슬라이드 이미지 중 첫번째 요소(이미지)를 복사

        
        //sliderClone을 슬라이드 될 이미지의 마지막에 추가(붙여넣기)
        sliderInner.appendChild(sliderClone);

        function sliderEffect() {
            currentIndex++;

            sliderInner.style.transition = "all 0.5s";
            sliderInner.style.transform = `translateX(-${sliderWidth*currentIndex}px)`;

            //마지막 슬라이드일 때
            if(currentIndex == sliderCount){
                setTimeout(()=>{
                    sliderInner.style.transition = "0s";
                    sliderInner.style.transform = "translateX(0px)"
                },500);
                currentIndex = 0;
            }
        }
    
        setInterval(sliderEffect, sliderInterval);

querySelector() 메서드를 사용하여 HTML 문서에서 이미지 슬라이드 쇼의 요소들을 가져온다.

querySelector() 메서드는 CSS 선택자를 사용하여 문서에서 요소를 선택할 수 있다.

그리고 let 키워드를 사용하여 몇 가지 변수를 정의한다.

currentIndex 변수는 현재 보이는 이미지의 인덱스를 저장하며, sliderInterval 변수는 이미지가 전환되는 간격을 나타낸다.

sliderCount 변수는 전체 이미지의 수를 저장하고, sliderWidth 변수는 이미지의 너비를 저장한다.

cloneNode() 메서드를 사용하여 첫 번째 이미지를 복제한 sliderClone 요소를 만들고, appendChild() 메서드를 사용하여 sliderClone 요소를 sliderInner 요소의 마지막 자식으로 추가한다.

이렇게 하면 슬라이드가 무한으로 반복되는 효과를 구현할 수 있다.

그리고 sliderEffect() 함수를 만든다.

이 함수는 setInterval() 메서드를 사용하여 일정한 간격으로 호출되며, currentIndex 변수를 증가시킨다.

그리고 style 속성을 사용하여 sliderInner 요소를 이동시키는 애니메이션 효과를 적용한다.

마지막 슬라이드일 경우 setTimeout() 메서드를 사용하여 일정 시간 후에 sliderInner 요소를 초기화시킨다.

마지막으로 setInterval() 메서드를 사용하여 sliderEffect() 함수를 일정한 간격으로 호출한다.

코드 보기 / GSAP

<!-- GSAP -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script>
        sliderInner.appendChild(sliderClone);

        function sliderEffect() {
            currentIndex++;
            gsap.to(sliderInner, {
                duration: 0.5,
                x: -sliderWidth * currentIndex,
                ease: "power2.inOut",
                onComplete: () => {
                    if (currentIndex == sliderCount) {
                        gsap.set(sliderInner, { x: 0 });
                        currentIndex = 0;
                    }
                },
            });
        }
        setInterval(sliderEffect, sliderInterval);
    </script>

이전 코드와 거의 비슷하지만, 이 코드는 GreenSock Animation Platform (GSAP) 라이브러리를 사용하여 이미지 슬라이드 쇼를 구현하는 코드이다.

먼저 HTML 문서에서 GSAP 라이브러리를 가져오기 위해 script 요소를 추가한다.

그리고 sliderClone 요소를 sliderInner 요소의 마지막 자식으로 추가하는 코드는 이전(위의 JAVASCRIPT)과 동일하다.

sliderEffect() 함수도 이전과 매우 유사하다.

하지만 이번에는 gsap.to() 메서드를 사용하여 sliderInner 요소를 이동시키는 애니메이션을 적용한다.

이 메서드는 GSAP 라이브러리에서 제공하는 TweenMax 클래스의 메서드 중 하나이다.

gsap.to() 메서드는 첫 번째 매개변수로 애니메이션을 적용할 대상 요소를 받으며, 두 번째 매개변수로 애니메이션 옵션 객체를 받는데, 이 객체에는 애니메이션의 속성들을 설정할 수 있다.

여기서는 duration 속성을 사용하여 애니메이션의 지속시간을 설정하고, x 속성을 사용하여 요소를 이동시키는 값을 설정한다.

그리고 ease 속성을 사용하여 애니메이션의 이징(easing) 방법을 설정한다.

마지막으로 onComplete 속성을 사용하여 애니메이션이 끝난 후에 실행할 함수를 정의한다.

onComplete 속성에서는 현재 인덱스가 마지막 이미지를 가리킬 때 gsap.set() 메서드를 사용하여 sliderInner 요소의 위치를 초기하고, currentIndex 변수를 0으로 설정합니다.
마지막으로 setInterval() 메서드를 사용하여 sliderEffect() 함수를 일정한 간격으로 호출한다.

코드 보기 / Jqurey

<!-- Jquery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <script>
        setInterval(() => {
            const sliderClone = $(".slider__inner .slider:first-child").clone(true);
            $(".slider__inner").append(sliderClone);
            currentIndex++;
            let sliderWidth = -currentIndex * $(".slider__img").width();
            $(".slider__inner").css("transition", "all 0.5s").css("transform", `translateX(${sliderWidth}px)`);
            if (currentIndex == sliderCount) {
                setTimeout(() => {
                $(".slider__inner").css("transition", "0s").css("transform", "translateX(0px)");
                }, 500);
                currentIndex = 0;
            }
        }, sliderInterval);
    </script>

setInterval() 함수를 사용하여 이미지가 일정한 간격으로 슬라이드되도록 한다.

각 슬라이드 이동 시마다, 첫 번째 이미지 요소를 복사하여 마지막 이미지 뒤에 추가한다.

그리고 currentIndex 변수를 증가시키고, 이동할 거리를 계산하여 $(".slider__inner") 요소에 CSS transform 속성을 적용하여 이동한다.

이 때, sliderWidth 변수에 -currentIndex * $(".slider__img").width()를 할당하여 슬라이드할 거리를 계산한다.

이후, if 조건문에서 현재 이미지가 마지막 이미지인지 확인하고, 마지막 이미지에 도달하면 다시 첫 번째 이미지로 이동시키기 위해 CSS transform 속성을 초기화 시킨다.

이 방법은 간단한 jQuery 코드를 사용하여 이미지 슬라이드 쇼를 구현하며, setInterval()과 CSS transform 속성을 사용하여 이미지를 슬라이드한다.

Fiat Lux