슬라이더 이펙트 - 트랜지션 효과

슬라이더 효과

슬라이드 이펙트 - 트랜지션 효과

오늘은 사진을 트랜지션 효과를 줘서 2초마다 사진이 바뀌는 사이트를 제작해보겠습니다.

---

결과

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

---

HTML 작성

HTML 틀은 slider__wrap -> slider__img -> slider 클래스 순으로 구성했습니다.

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider"><img src="../assets/img/effect_bg01.jpg" alt="이미지1"></div>
        <div class="slider"><img src="../assets/img/effect_bg02.jpg" alt="이미지2"></div>
        <div class="slider"><img src="../assets/img/effect_bg03.jpg" alt="이미지3"></div>
        <div class="slider"><img src="../assets/img/effect_bg04.jpg" alt="이미지4"></div>
        <div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div>
    </div>
</div>

CSS 작성

이미지를 position: absolute로 한곳에 모아서 겹치게 만들어놓고, nth-child(n)를 사용해 사진 각각에 z-index값을 줘서 순서를 매겨놓았습니다.

.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 450px;
}
.slider {
    position: absolute;
    left: 0;
    top: 0;
}
.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(1) {z-index: 5;}
.slider:nth-child(2) {z-index: 4;}
.slider:nth-child(3) {z-index: 3;}
.slider:nth-child(4) {z-index: 2;}
.slider:nth-child(5) {z-index: 1;}

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

JS 작성

setInterval 메서드를 사용해 2초마다 계속 트렌지션이 실행되는 스크립트를 작성했습니다. 각각의 사진에 opacity값을 0으로 줘서 사진이 한개만 보이게 설정하고 setInterval 메서드로 인해 2초마다 다음 사진이 opacity가 1이되고 그 전 사진은 0이되어 보이지않게 설정했습니다. 5를 나눈 나머지값을 가져오는 식으로 식을 구성하였으며, 사진의 갯수 5로 나눈 나머지값을 사용해 0 1 2 3 4가 계속 반복되게 설정했습니다.

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img");
const slider = document.querySelectorAll(".slider");

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

setInterval(()=> {

    let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지
    
    //첫번째 이미지를 안보이게
    //두번째 이미지를 보이게

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

    currentIndex = nextIndex;
},1000);

// 구조
            // 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";    //첫번째 이미지를 보이게