ss SLIDER Effect 02
본문 바로가기
JAVASCRIPT Effect

SLIDER Effect 02

by 꿈나무개발 2022. 8. 29.
728x90

슬라이드 이펙트 - 좌로 움직이기

다섯 장의 이미지를 3초에 한 장씩 넘어가는 효과를 만들어 보았습니다. 이미지가 오른쪽에서 왼쪽으로 움직이는 것처럼 넘어가는 방식입니다. 사이트의 우측 하단에 소스 보기를 누르면 html, css, javascript 소스를 모두 확인할 수 있습니다. 이번 슬라이드 이펙트는 javascript, GSAP, jQuery방식을 모두 소개하겠습니다.

원본 소스 보기 원본 사이트 보기

01. 자바스크립트 방식

슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setInterval 함수를 사용합니다. 

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");       //보여지는 영역
const sliderInner = document.querySelector(".slider__inner");   //움직이는 영역
const slider = document.querySelectorAll(".slider");            //이미지

let currentIndex = 0;               //현재 이미지
let sliderCount = slider.length;    //이미지 갯수

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

//sliderInner.style.transform += "translateX(0px)";         첫 번째 이미지: -800 * 0
//sliderInner.style.transform += "translateX(-800px)";      두 번째 이미지: -800 * 1
//sliderInner.style.transform += "translateX(-1600px)";     세 번째 이미지: -800 * 2
//sliderInner.style.transform += "translateX(-2400px)";     네 번째 이미지:  -800 * 3
//sliderInner.style.transform += "translateX(-3200px)";     다섯 번째 이미지: -800 * 4

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

    // if(currentIndex < 4 ){    //if 사용
    //     currentIndex++;
    // } else {
    //     currentIndex = 0;
    // }

    //(currentIndex < 4) ? currentIndex++ : currentIndex = 0     //삼항연산자 사용
    
    sliderInner.style.transform = "translateX("+ -800 * currentIndex +"px)";
}, 2000);

02. 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", {
                x : -800 * currentIndex
            });
        }, 2000);
    </script>

03. 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>
728x90
반응형

'JAVASCRIPT Effect' 카테고리의 다른 글

PARALLAX Effect 01  (5) 2022.09.06
SLIDER Effect 03  (1) 2022.09.02
SLIDER Effect 01  (3) 2022.08.29
QUIZ Effect 06  (5) 2022.08.24
SEARCH Effect 03  (3) 2022.08.22

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

자세히보기
광고 준비중입니다.

티스토리툴바