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

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

 

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

슬라이드 효과 1

슬라이드 이펙트 중 가장 기본적인 트랜지션 효과를 줘보겠습니다.

구조

<main id="main">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider"><img src="./img/sliderEffect01-min.jpg" alt="이미지1"></div>
            <div class="slider"><img src="./img/sliderEffect02-min.jpg" alt="이미지2"></div>
            <div class="slider"><img src="./img/sliderEffect03-min.jpg" alt="이미지3"></div>
            <div class="slider"><img src="./img/sliderEffect04-min.jpg" alt="이미지4"></div>
            <div class="slider"><img src="./img/sliderEffect05-min.jpg" alt="이미지5"></div>
        </div>
    </div>
</main>

스크립트_javascript

// 선택자
const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = sliderWrap.querySelectorAll(".slider");

let currentIndex = 0;               // 현재 보이는 이미지
let sliderCount = slider.length;    // 이미지 갯수
let sliderInterval = 3000;          // 이미지 변경 간격 시간


setInterval(() => {
    // 0 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0  // currentIndex
    // 1 2 3 4 0 1 2 3 4 0 1 2 3 4 0 1  // nextIndex
    let nextIndex = (currentIndex + 1) % sliderCount;

    slider[currentIndex].style.opacity = "0";
    slider[nextIndex].style.opacity = "1";

    currentIndex = nextIndex;

    console.log(currentIndex);
}, sliderInterval);

// slider[0].style.opacity = "0"; // 첫번째 이미지를 안보이게
// slider[1].style.opacity = "1"; // 두번째 이미지를 보이게

// slider[1].style.opacity = "0"; // 두번째 이미지를 안보이게
// slider[2].style.opacity = "1"; // 세번째 이미지를 보이게

// slider[2].style.opacity = "0"; // 세번째 이미지를 안보이게
// slider[3].style.opacity = "1"; // 네번째 이미지를 보이게

// slider[3].style.opacity = "0"; // 네번째 이미지를 안보이게
// slider[4].style.opacity = "1"; // 다섯번째 이미지를 보이게

// slider[4].style.opacity = "0"; // 다섯번째 이미지를 안보이게
// slider[0].style.opacity = "1"; // 첫번째 이미지를 보이게

일단 선택자를 만들어줍니다. slider__wrap과 slider__img, slider에 대한 선택자를 만들어준 후, 변수를 설정해줍니다.

currentIndex는 현재 보이는 이미지로 0을 설정해주고, sliderCount는 이미지 갯수로 slider.length로 구해줍니다. sliderInterval는 이미지 변경 간격 시간으로 3000을 설정해 3초 간격으로 움직이게 해줍니다.

 

그리고 setInterval 함수를 이용해줍니다.

 

setInterval

setInterval() 함수는 일정한 간격으로 코드를 반복적으로 실행할 수 있도록 해주는 타이머 함수입니다.

 

1. nextIndex 변수에 currentIndex 변수의 다음 인덱스 값을 저장합니다. 이때 % 연산자를 사용하여 인덱스가 배열의 범위를 벗어나는 것을 방지합니다. 예를 들어, 만약 현재 currentIndex가 4이고 sliderCount가 5라면, nextIndex는 0이 됩니다.
2. 현재 보이는 이미지(slider[currentIndex])의 투명도(opacity)를 0으로 설정하여 이미지가 사라지도록 합니다.
3. 다음 이미지(slider[nextIndex])의 투명도를 1로 설정하여 이미지가 나타나도록 합니다.
4. currentIndex 변수를 nextIndex 변수로 갱신합니다. 이를 통해 다음 타이머에서 이전 이미지 대신 새로운 이미지가 보이게 됩니다.
5. 현재 currentIndex 값을 출력합니다.

스크립트_GSAP

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

        gsap.to(slider[currentIndex], { opacity: 0, duration: 0.5 }); // 현재 슬라이더 숨기기
        gsap.to(slider[nextIndex], { opacity: 1, duration: 0.5 }); // 다음 슬라이더 보여주기

        currentIndex = nextIndex;
    }, sliderInterval);
</script>

1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 nextIndex로 저장합니다.

 

2. 그리고, gsap.to() 함수를 사용하여 현재 슬라이더를 숨기고, 다음 슬라이더를 보여줍니다. gsap.to() 함수의 첫 번째 인자로는 slider[currentIndex]를 사용하여 현재 보이는 슬라이더 요소를 선택합니다. 두 번째 인자로는 현재 슬라이더의 opacity 속성을 0으로 설정하고, 0.5초 동안 변화하도록 설정합니다. 이와 같은 방식으로 slider[nextIndex]를 사용하여 다음 슬라이더를 선택하고, opacity 속성을 1로 설정하고, 0.5초 동안 변화하도록 설정합니다.

 

3. currentIndex 값을 nextIndex로 변경하여 다음 슬라이더가 선택되도록 합니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.

스크립트_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(() => {
        let nextIndex = (currentIndex + 1) % sliderCount;

        $(slider[currentIndex]).animate({ opacity: 0 }, 500); // 현재 슬라이더 숨기기
        $(slider[nextIndex]).animate({ opacity: 1 }, 500); // 다음 슬라이더 보여주기

        currentIndex = nextIndex;
    }, sliderInterval);
</script>

1. 먼저, setInterval() 함수를 사용하여 일정한 시간 간격으로 슬라이더 이미지를 변경합니다. 이전 예제와 마찬가지로 currentIndex 값을 1 증가시키고, sliderCount로 나눈 나머지 값을 nextIndex로 저장합니다.

 

2. 그리고, $(selector).animate() 함수를 사용하여 현재 슬라이더를 숨기고, 다음 슬라이더를 보여줍니다. $()를 사용하여 slider[currentIndex]와 slider[nextIndex] 요소를 선택하고, animate() 함수의 첫 번째 인자로는 현재 슬라이더의 opacity 속성을 0으로 설정하고, 0.5초 동안 변화하도록 설정합니다. 이와 같은 방식으로 slider[nextIndex]를 사용하여 다음 슬라이더를 선택하고, opacity 속성을 1로 설정하고, 0.5초 동안 변화하도록 설정합니다.

 

3. currentIndex 값을 nextIndex로 변경하여 다음 슬라이더가 선택되도록 합니다. 이를 반복적으로 실행하여 이미지 슬라이더를 구현합니다.

완성된 페이지와 코드 보기

 

코드보기