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

SLIDER Effect 03

by 꿈나무개발 2022. 9. 2.
728x90

슬라이드 이펙트 - 좌로 움직이기(연속적으로)

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

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

자바스크립트 방식

슬라이드 효과를 위한 자바스크립트 작성법입니다. 슬라이드 효과를 위해 setTimeout 함수를 사용합니다. setTimeout 메서드는 만료된 후 함수나 지정한 코드 조각을 실행하는 타이머를 설정합니다. 

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                                     //이미지 갯수
let sliderWidth = sliderImg.offsetWidth;                            //이미지 가로값
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    //첫 번째 이미지 복사
sliderInner.appendChild(sliderClone);                               //첫 번째 이미지를 마지막에 넣어줌

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

    // 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
    // sliderInner.style.transform = "translateX(-4000px)"; 800 * 5
    // sliderInner.style.transform = "translateX(-4800px)"; 800 * 6

    //마지막 사진에 위치했을 때
    if(currentIndex == sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700);
        
        currentIndex = 0;
    }
}
setInterval(sliderEffect, 2000);
728x90
반응형

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

Mouse Effect 01  (6) 2022.09.06
PARALLAX Effect 01  (5) 2022.09.06
SLIDER Effect 02  (3) 2022.08.29
SLIDER Effect 01  (3) 2022.08.29
QUIZ Effect 06  (5) 2022.08.24

관련글

댓글

HTML

HTML

자세히보기
CSS

CSS

자세히보기
JAVASCRIPT

JAVASCRIPT

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

티스토리툴바