[자바스크립트 응용] 슬라이드 효과 02

이미지 슬라이드 효과 02

저번 시간에 이어서 두번재 시간입니다. 한단계식 계속해서 업그레이드 될 것 같네요. 슬라이드유형1은 슬라이드 효과가 딱딱하게 바뀌어서 보는 맛이 밋밋하진 않으셨나요? 그래서 준비했습니다!
이번엔 슬라이드가 넘어가는 방식을 부드럽게 표현해보겠습니다. 그리고 자바스크립트 라이브러리 중에서 GSAP와 유명한 JQUERY로도 구현할 예정입니다. 잘 따라와 주세요💨

---

원본 소스 보기 원본 사이트

---

▶ 이번 02유형은 라이브러리 중 GSAP와 JQUERY를 사용했어요! 그래서 원본소스에는 js, GSAP, JQUERY가 올라갈 예정입니다. 말로는 표현이 힘들기도 하고 이해도 잘 안되실 수 있어서 그림으로라도 준비해봤습니다. 오늘의 핵심은 밑의 그림을 참고하시면 되겠습니다.

JS 소스

const sliderInner = document.querySelector(".slider__inner");
const slider = document.querySelectorAll(".slider");

let currentIndex = 0;

sliderInner.style.transition = "all 1.6s";
setInterval(()=>{
    currentIndex  = (currentIndex + 1 )% slider.length;

    sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
},2000);

■ 핵심 파헤치기✍

display:flex , overflow:hidden

소스를 짜기전에 앞서서 준비해야할 사항이 있는데요. CSS에서 이 속성을 이용해서 이미지들을 한줄로 표시해주는 겁니다.
그리고, 이번엔 한줄로 출력된 그림을 옆으로 밀리게끔 보여야 하기 때문에 1유형과같은 방식으로는 힘들어요. 그림의 넓이값이 800px이므로 우리는 이 점을 이용해야 합니다.

let currentIndex = 0;
sliderInner.style.transition = "all 1.6s";

▶ 1번 유형을 보셨다면 아시겠지만 currentIndex는 현재 보이는 이미지의 순서를 의미합니다. 첫번째 이미지부터 보여야하므로 변수를 통해 0으로 선언합니다.
참고로 js를 좀 더 활용해보기 위해서 transition효과는 js를 이용해서 주었습니다. 이 효과를 1.6초동안 부여해주므로 딱딱하던 전환효과가 1.6초에 걸쳐 부드럽게 전환되는 효과를 얻을 수 있습니다.

currentIndex = (currentIndex + 1 )% slider.length;

▶ 첫 시작이 0이므로, 위의 값은 최초 시작시 0+1, 즉 1이됩니다. 그러면 이 1을 다시 같은 currentIndex에 대입합니다. 왜 이번엔 nextindex를 사용하지 않을까요?굳이 다음 이미지에대한 값이 필요가 없기 때문입니다. 왜냐하면 우리는 넓이값을 이용해서 전환효과를 줄거라서 그래요. 이해가 안된다면 밑의 구문을 한 번 봐주세요.

sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";

앞서서 넓이값을 이용해야 한다고 했습니다. 그 이유가 여기서 나오는데요. 두번재 이미지부터는 오른쪽으로 800px(= -800px)만큼 이동하면 노출이 되겠죠? 그렇다면 초반에 1로 대입된 값이 -800*1, 즉 -800만큼 이동시키므로 두번재 이미지가 나오게 됩니다.
그럼 다시 1로 받은 currentIndex값이 다시 윗줄로 올라가서 1+1 = 2 가 되므로 -800*2 ==> -1600이 됩니다. 그래서 세번재 이미지가 노출되게 되는거죠. 말로 표현하기 참 어려운 내용이네요^_^...한번 작성해보시면서 손으로 깨우치시는걸 추천드립니다 ^^!!!!

GSAP

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script>
    const slider = document.querySelectorAll(".slider");

    let currentIndex = 0;

    setInterval(() => {
        currentIndex = (currentIndex +1) % slider.length;

        gsap.to(".slider__inner", {
            duration : 1.6,
            x : -800 * currentIndex,
        });
    }, 2000);
</script>

■ 핵심 파헤치기✍

GSAP는 자바스크립트 라이브러리의 일종인데요. 기존 CSS나 JS로도 충분히 동적인화면을 만들어낼 수는 있지만 이 GSAP는 정교하고 세밀한 화면을 좀더 간편하게 설정할 수 있습니다. 이러한 라이브러리들을 사용하기 위해서는 호스팅된 서버에서 직접 설치해서 사용할 수도 있지만 간편하게 CDN을 사용하면 쉽게 사용할 수 있습니다.

gsap.to(".slider__inner", {
     duration : 1.6,
    x : -800 * currentIndex,
});

GSAP만의 메서드인데요. 저희는 정말~ 편하게 이 메서드를 보고 숫자놀이만 쪼.끔! 해서 js로 하던 효과를 동일하게 부여할 수 있습니다. duration은 전환효과의 동작시간을 뜻하고, x는 x축으로 얼마나 이동할지에 대한 값을 입력해주면 됩니다.

JQUERY

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>    
<script>
    let currentIndex = 0;

    setInterval(()=>{
        currentIndex = (currentIndex +1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({
            left: -800 * currentIndex
        }, 600)
    },2000);
</script>

■ 핵심 파헤치기✍

JQUERY도 자바스크립트 라이브러리의 일종인데요. 제이쿼리도 CDN을 이용해서 쉽게 사용할 수 있습니다.

js는 doucument.querySlector 등등을 이용해서 장황하게 적어서 호출을 했는데요. 제이쿼리는 그냥 $표시하나면 호출을 쉽게 할 수 있습니다. 그래서 $를 사용해서 호출을 합니다. 그리고 제이쿼리를 이용한 코드에서는 animate를 left를 이용해서 애니메이션효과를 주었는데요. left, top, right, bottom등은 position이 없으면 움직이지 않는 친구들이기때문에, .slider__inner에 position을 부여해준겁니다.

- 끝.이.에.요 -