슬라이드 효과 만들기(translateX 연속)

연속적으로 좌로 넘어가는 슬라이드 효과 만들기

이번에는 사진이 연속적으로 끝 없이 좌로 넘어가는 슬라이드 효과를 만들어 보도록 하겠습니다.

 

HTML 작성하기

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider s1"><img src="img/sliderEffect06-min.jpg" alt="이미지6"></div>
                <div class="slider s2"><img src="img/sliderEffect07-min.jpg" alt="이미지7"></div>
                <div class="slider s3"><img src="img/sliderEffect08-min.jpg" alt="이미지8"></div>
                <div class="slider s4"><img src="img/sliderEffect09-min.jpg" alt="이미지9"></div>
                <div class="slider s5"><img src="img/sliderEffect10-min.jpg" alt="이미지10"></div>
            </div>
        </div>
    </div>
</main>

HTML 정리해보기

• html문서 상의 구조는 이전에 만들었던 translateX를 사용하여 좌로 보내는 슬라이드 페이지와 동일합니다.

CSS 작성하기

 변경된 css

• 기존 스타일과 동일합니다.

Javascript 작성하기 ( javascript 사용 )

<script>
    // 선택자
    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 sliderCount = slider.length;                    // 전체 이미지 개수
    let sliderWidth = slider[0].clientWidth;            // 이미지 width값
    let sliderHeight = slider[0].clientHeight;
    let sliderClone = sliderInner.firstElementChild.cloneNode(true);    // 첫 번째 이미지 복사

    let sliderInterval = 2000; 
    // 복사한 첫 번째 이미지 마지막에 붙여넣기
    sliderInner.appendChild(sliderClone);

    function sliderEffect(){
        currentIndex++;

        sliderInner.style.transition = "all 0.8s";
        sliderInner.style.transform = `translateY(-${sliderHeight * currentIndex}px)`;

        // 마지막 이미지 순서에
        if(currentIndex == sliderCount){
            setTimeout(() => {
                sliderInner.style.transition = "all 0s";
                sliderInner.style.transform = `translateY(0px)`;
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javascript 정리해보기

• sliderWidth와 sliderClone이라는 변수를 추가했습니다.
• sliderWidth = clientWidth를 사용하여 [0] 번째 slider(순서 무관)의 width 값을 저장합니다.
• sliderClone = cloneNode(true)를 사용하여 sliderInner의 firstElementChild(첫 번째 요소)를 복사하여 저장합니다.
• 복사한 sliderClone을 appendChild를 사용하여 slideInner의 마지막에 붙여넣습니다.

 

• sliderEffect 함수
• currentIndex를 1 증가시킵니다.
• sliderInner의 변화시간을 0.8초로 설정합니다.
• sliderInner의 위치를 translateX를 이용하여 움직입니다. 움직이는 거리는
• - (sliderWidth * currentIndex) px 로 설정합니다. (슬라이더 개별 width값 * 현재 index값)
• if( currentIndex == sliderCount) 를 사용하여 마지막 이미지 순서일 때에 대한 조건문을 정의합니다.
• setTimeout 함수는 특정시간 이후 한번 실행되는 함수입니다.
• 마지막 이미지가 나온 후, 700ms뒤에 sliderInner의 변화시간을 0으로 바꾼 후 위치를 translateX(0px)로 초기화합니다.
• currentIndex도 0으로 초기화 시킵니다.

 

• setInterval함수에 sliderEffect함수를 넣고 sliderInterval의 시간마다 반복합니다.

Javascript 작성하기 ( GSAP 사용 )

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    function sliderEffect(){
        currentIndex++;

        gsap.to(sliderInner, {
            x : -sliderWidth * currentIndex,
            duration : 0.5,
            ease : "power.out"
        });

        if(currentIndex == sliderCount){
            setTimeout(() => {
                gsap.to(sliderInner, {
                    x : 0,
                    duration : 0,
                    ease : "power.out"
                });
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javascript 알아보기

• gsap cdn을 적어줍니다.
• 위 javascript에서 translateX의 값을 사용하여 조정했던 위치를 
• gsap.to(sliderInner, {
•   x : -sliderWidth * currentIndex, (x 좌표 이동)
•   duration : 0.5, (움직임의 기간)
•   ease : "power.out" (움직임의 종류) } 로 표현 가능합니다.

Javascript 작성하기 ( jQuery 사용 )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<script>
    function sliderEffect(){
        currentIndex++;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left : -sliderWidth * currentIndex}, 500);

        if(currentIndex == sliderCount){
            setTimeout(() => {
                $(".slider__inner").animate({left : 0}, 0);
            }, 700);
            currentIndex = 0;
        };
    };

    setInterval(sliderEffect, sliderInterval);
</script>

javascript 정리해보기

• 마찬가지로 jQuery의 cdn을 적어줍니다.
• jQuery에는 translate의 기능이 없어 left 값을 조정해야하기 때문에 $(".slider__inner")에 position : relative 속성을 부여
• 합니다.
• jQuery에서는 animate({left : -sliderWidth * currentIndex}, 500)으로 표현합니다.

 

 

 

이상으로 무한하게 좌로 넘어가는 슬라이드 효과를 세 가지 스크립트를 통해 만들어 보았습니다 !