슬라이드 이펙트 03

슬라이더 이펙트

자바스크립트를 이용한 슬라이드 효과 만들기 입니다.

---

슬라이더 이펙트 - 로테이션 효과 02

위치가 리셋되지 않고 일정 시간 간격으로 이미지를 자동으로 바꿔 출력해주는 효과입니다.

슬라이더 이펙트 02와 기본적인 효과는 같지만 마지막 사진 이후 로테이션이 될때 오른쪽 처음으로 돌아가지 않고 계속 좌측으로 로테이션이 되도록 하는 효과입니다.

---

▶ CSS 파트

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {      /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 500px;
    overflow: hidden;
}

.slider__inner {    /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px;  /* 총 이미지가 6개 */
    height: 500px;
}
.slider {           /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 500px;
    
}
.slider::before {
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0,0,0,0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1)::before{content:'인테리어1';}
.slider:nth-child(2)::before{content:'인테리어2';}
.slider:nth-child(3)::before{content:'인테리어3';}
.slider:nth-child(4)::before{content:'인테리어4';}
.slider:nth-child(5)::before{content:'인테리어5';}
.slider:nth-child(6)::before{content:'인테리어1';}

@media (max-width: 800px){
    .slider__img {
        width: 400px;
        height: 300PX;
    }
}

이번 효과는 좌측으로 계속 이동하기 때문에 width값을 5칸이 아닌 6칸을 기준으로 잡아야 합니다.
단, 사진을 더 추가하는게 아니라 스크립트 작업으로 뒤쪽에 1번 사진을 추가하는 작업이 진행됩니다.

▶ JAVASCRIPT 파트

//자바 스크립트 이미지 슬라이더 출력 부분
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                             //이미지 가로 값 (offsetWidth: 요소의 전체 너비값 가져옴)
let sliderClone = sliderInner.firstElementChild.cloneNode(true);    //첫번째 이미지 복사 (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(() => {      //setTimeout: 한번만 지연해서 실행해주는 메서드
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        }, 700);

        currentIndex = 0;
    }
};
setInterval(sliderEffect, 2000);

※cloneNode( )와 appendChild( ) 메서드

cloneNode( ): 선택한 요소와 똑같은 노드를 복제. true 입력 시 자식 요소까지 전부 복제.
appendChild( ): 부모 요소 뒤에 자식 요소를 추가하는 메서드.

이번 효과는 setInterval을 통해 카운트를 계속 반복하기 보단 cloneNode() 메서드를 사용해 이미지를 복사해 appendChild( )로 뒤에 추가합니다.
이러한 작업을 초기화 및 반복해 이미지가 처음으로 돌아가지 않고 계속 좌측으로 이동하는 효과를 줄 수 있습니다.

※setTimeout( )

setInterval( )과 효과는 같지만 1번만 실행합니다.

원본 소스 보기