자바스크립트 슬라이드 효과(2)에 대해 알아보자!

오늘은 사진이 자연스럽게 넘어가는 슬라이드 효과에 대해 알아보겠습니다!

자바스크립트 슬라이드 효과

슬라이드 효과 2

슬라이드 이펙트 중 이미지가 가로로, 왼쪽으로 넘어가는 효과입니다.

 

구조

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="./img/sliderEffect06-min.jpg" alt="이미지1"></div>
                <div class="slider"><img src="./img/sliderEffect07-min.jpg" alt="이미지2"></div>
                <div class="slider"><img src="./img/sliderEffect08-min.jpg" alt="이미지3"></div>
                <div class="slider"><img src="./img/sliderEffect09-min.jpg" alt="이미지4"></div>
                <div class="slider"><img src="./img/sliderEffect10-min.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</main>

이번에 slider를 slider__inner안에 감싸서 작업했습니다.

 

스크립트_ 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 sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 3000;          // 이미지 변경 간격 시간

sliderInner.style.transition = "all 0.4s";

setInterval(() => {
    currentIndex = (currentIndex + 1) % sliderCount;

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

1번과 마찬가지로 선택자와 변수를 만들어줍니다.

 

1. currentIndex 변수에 currentIndex + 1 값을 저장합니다. 이때 % 연산자를 사용하여 인덱스가 배열의 범위를 벗어나는 것을 방지합니다. 예를 들어, 만약 현재 currentIndex가 4이고 sliderCount가 5라면, currentIndex는 0이 됩니다.
2. sliderInner 요소의 transform 속성을 변경합니다. 이때, translateX() 함수를 사용하여 요소를 가로 방향으로 이동시킵니다. 이동 거리는 currentIndex 값에 따라 800 픽셀씩 이동합니다. 이때, translateX() 함수의 인자로 -800 * currentIndex 값을 전달하여 요소를 이동합니다.
3. 이전 단계에서 currentIndex 변수를 갱신했으므로, 다음 타이머에서 새로운 이미지가 보이게 됩니다.

스크립트_ GSAP

<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script>
    setInterval(() => {
        currentIndex = (currentIndex + 1 ) % sliderCount;

        gsap.to(".slider__inner", {
            x : -800 * currentIndex,
            duration : 1,
            ease: "power4.out"
        });
    }, sliderInterval);
</script>

gsap 라이브러리를 사용하여 애니메이션을 구현합니다. gsap은 JavaScript 애니메이션 라이브러리로, 간단하게 코드를 작성하면 자연스럽고 부드러운 애니메이션을 만들 수 있습니다. to() 함수는 요소를 대상으로 움직임을 제어하며, 여러 가지 속성들로 다양한 효과를 부여할 수 있습니다.

 

1. currentIndex 변수에 (currentIndex + 1 ) % sliderCount 값을 할당합니다. 이때 % 연산자를 사용하여 인덱스가 배열의 범위를 벗어나는 것을 방지합니다. 예를 들어, 만약 현재 currentIndex가 4이고 sliderCount가 5라면, currentIndex는 0이 됩니다.
2. gsap.to() 함수를 사용하여 .slider__inner 요소를 가로 방향으로 이동시킵니다. 이때, x 속성에 -800 * currentIndex 값을 전달하여 요소를 이동합니다. 이동 거리는 currentIndex 값에 따라 800 픽셀씩 이동합니다.
3. duration 속성을 사용하여 요소 이동 시간을 1초로 설정합니다.
4. ease 속성을 사용하여 이동 애니메이션의 타이밍 함수를 power4.out으로 설정합니다.
5. 이전 단계에서 currentIndex 변수를 갱신했으므로, 다음 타이머에서 새로운 이미지가 보이게 됩니다.

스크립트_ 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(() => {
        currentIndex = (currentIndex + 1) % $(".slider").length;

        $(".slider__inner").css("position", "relative");
        $(".slider__inner").animate({left : -800 * currentIndex}, 600, "easeOutElastic");

    }, sliderInterval);
</script>

jQuery 라이브러리를 사용하여 애니메이션을 구현합니다. jQuery는 JavaScript 애니메이션 라이브러리로, css() 함수와 animate() 함수를 사용하여 요소의 속성 값을 조정하고 애니메이션을 만들 수 있습니다.

 

1. currentIndex 변수에 (currentIndex + 1) % $(".slider").length 값을 할당합니다. 이때 % 연산자를 사용하여 인덱스가 배열의 범위를 벗어나는 것을 방지합니다. 예를 들어, 만약 현재 currentIndex가 4이고 $(".slider").length가 5라면, currentIndex는 0이 됩니다.
2. $(".slider__inner").css("position", "relative") 코드를 사용하여 .slider__inner 요소의 position 속성 값을 relative로 설정합니다. 이는 이후에 .animate() 함수를 사용하기 위한 준비 작업입니다.
3. .animate() 함수를 사용하여 .slider__inner 요소를 가로 방향으로 이동시킵니다. 이때, left 속성에 -800 * currentIndex 값을 전달하여 요소를 이동합니다. 이동 거리는 currentIndex 값에 따라 800 픽셀씩 이동합니다. 또한, 이동 시간은 600 밀리초로 설정되며, easeOutElastic 이라는 타이밍 함수가 사용됩니다.
4. 이전 단계에서 currentIndex 변수를 갱신했으므로, 다음 타이머에서 새로운 이미지가 보이게 됩니다.

완성된 페이지와 코드 보기

 

코드보기