슬라이드 이펙트 1

슬라이드 효과 만들기

이미지 슬라이드 효과를 만드는 방법을 익혀봅시다. 슬라이드는 다양한 방식으로 줄 수 있습니다.

슬라이드 효과 : 트랜지션 효과

슬라이드 효과는 다수의 이미지가 있을 때, 시간이 지날 때 한장씩 슬라이드 되며 보여지도록 한 효과입니다.

HTML 코드

슬라이드 할 이미지 각각에 slider 클래스를 주고, 각 이미지를 감싼 slider__img와 또 한번 감싼 slider__wrap을 만들었습니다.

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

CSS 코드

각 이미지에 바로 위 부모요소를 기준으로 포지션을 주어, 위치를 이동시킬 수 있도록 하였습니다. 또한 이미지가 순서대로 위치할 수 있도록 z-index로 z축 상의 위치를 조정해주었습니다.

.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;}

Javascript 코드

자바스크립트를 작성해 이미지가 보이고 안보이도록 효과를 주었습니다. setsetInterval() 메소드를 이용하면 n초에 한번씩 실행문이 작동되도록 할 수 있습니다.

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

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

//n초에 한번씩 실행문을 실행시켜줌
setInterval(() => {
    let nextIndex = (currentIndex + 1) % sliderCount;   //다음 이미지
    
    slider[currentIndex].style.opacity = "0"; //첫번째 이미지를 안보이게
    slider[nextIndex].style.opacity = "1";  //두번째 이미지를 보이게

    //작동 원리
    //currentIndex => 0 1 2 3 4 0 1 2 3 4 …
    //nextIndex    => 1 2 3 4 0 1 2 3 4 0 …
    //slider[currentIndex].style.opacity = "0"; //첫번째 이미지를 안보이게
    //slider[nextIndex].style.opacity = "1";    //두번째 이미지를 보이게
    //slider[currentIndex].style.opacity = "1"; //두번째 이미지를 안보이게
    //slider[nextIndex].style.opacity = "2";    //세번째 이미지를 보이게
    //slider[currentIndex].style.opacity = "2"; //세번째 이미지를 안보이게
    //slider[nextIndex].style.opacity = "3";    //네번째 이미지를 보이게
    //slider[currentIndex].style.opacity = "3"; //네번째 이미지를 안보이게
    //slider[nextIndex].style.opacity = "4";    //다섯번째 이미지를 보이게
    //slider[currentIndex].style.opacity = "4"; //다섯번째 이미지를 안보이게
    //slider[nextIndex].style.opacity = "0";    //첫번째 이미지를 보이게

    currentIndex = nextIndex;
}, 3000);   //1000은 1초를 의미한다.

원본 페이지 보기