좌로 움직이는 슬라이드 (연속적으로)효과

슬라이드04

 

슬라이드 4번 유형은 5번 이미지에 왔을때  그 뒤에 1번이 나오도록 1번을 복사 해서 연속적이게 보여주게 할 것 입니다.

 변수인 let sliderClone = sliderInner.firstElementChild.cloneNode(true);를 만들어줍니다. 이 변수는 sliderInner의 첫번째 자식 요소를  그 요소를 유지한 상태로 하나 더 생성해줍니다. 그 후 appendChild를 사용하여 sliderInner 뒤에 복사한 요소를 위치 시켜 줍니다. sliderInner.appendChild(sliderClone);

 

그렇게 되면 이미지는 1번 2번 3번 4번 5번 1번 으로 나오게 됩니다.

        let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지
    </script>
    <script>
        //복사한 첫번째 이미지  마지막에 붙여넣기
        sliderInner.appendChild(sliderClone);

        function sliderEffect(){
            currentIndex++;

            sliderInner.style.transition = "all 0.6s"
            sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"

            //마지막 이미지에 위치 했을 때
            if(currentIndex == sliderCount){
                setTimeout(()=>{
                    sliderInner.style.transition = "0s"
                    sliderInner.style.transform = "translateX(0px)"
                },700);
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect,sliderInterval)

그후 sliderEffect 라는 함수를 만든 뒤 sliderInner에 style.transform을 주어 위치 값을 바뀌게 해주며 그 값은 이미지의 가로값 * 현재 보여지는 이미지의 값 px로 설정합니다. 그 후 맨위 currentIndex++을 붙여 각 이미지의 번호 값에 맞게 화면에 출력 되게 위치를 이동시켜줍니다.

 

그 후 이미지가 5번으로 이동했을경우 조건문을 사용하여  currentIndex가  이미지 갯수가 됐을 때

setTimeout 함수를 실행 시켜줍니다.

• setTimeout은 JavaScript에서 비동기적으로 특정 작업을 일정 시간 후에 실행하기 위해 사용되는 함수입니다. setTimeout 함수는 지정된 시간(밀리초 단위)이 지난 후에 콜백 함수를 실행합니다. setTimeout 함수의 일반적인 사용법은 다음과 같습니다.

그 함수 안에는 inner의 위치값을 0으로 설정해 1번 이미지로 돌아오게 하고 transition을 0s 로 맞춰 그 돌아오는 시간을 없애주면 자연스럽게 처음 이미지로 다시 돌아 갑니다.

 

미션

 

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, {x:-sliderWidth * currentIndex ,duration:0.6})

            //마지막 이미지에 위치 했을 때
            if (currentIndex == sliderCount) {
                setTimeout(() => {
                    gsap.to(sliderInner, { x: 0 , duration: 0})
                },700);

                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, sliderInterval)
    </script>

GSAP는 라이브러리를 가져온 후 gsap.to를 사용해야한다.

sliderInner에 속성 값을 정해줄것이기 때문에 함수안에 gsap.to(sliderInner)를 사용하고 그 괄호 안에 transitionX의 값을 x라고 표기하며 x의 값은  -sliderWidth * currentIndex값으로 해준다 currentIndex 값은  currentIndex ++ 때문에 변하기 때문에 다른 값이 나온다. 그 뒤에 duration 값 0.6을 설정 해줍니다 .

 

그 후 if조건문을 사용하여 조건을 쓰고 그 안에 함수setTimeout을 넣어줍니다.  조건에 맞으면 설정 값을 바꿔 줄 것이기 때문에 함수안에 gsap.to를 사용해주고 설정 값을 바꿀 sliderInner 와 바꿀 transition값을 적어줍니다. 

 

jQuery로 구현하기

    </script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
         $(".slider__inner").append(sliderClone);
        
        function sliderEffect() {
            currentIndex++;

            $(".slider__inner").animate({left:-sliderWidth * currentIndex}, 600) 

            //마지막 이미지에 위치 했을 때
            if (currentIndex == sliderCount){
                setTimeout(() => {
                    $(".slider__inner").animate({left:0}, 0)
                });
                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, sliderInterval)
        </script>

jQuery는 어렵다 모르겠다.

 $(".slider__inner").append(sliderClone); 이 부분에서도  appendChild 사용이 안된다. $(위치값).animate를 사용하며

translate가 없어 left를 사용한다.... duration은 쓰지 않고 숫자만 표기해주면 적용 됌.