자바스크립트 슬라이드 효과 : transition

자바스크립트 : 슬라이드 효과

자바스크립트의 다양한 효과들 중, CSS의 트랜지션 속성을 활용한 이미지 슬라이드 효과입니다.

---

HTML 소스

HTML로 뼈대를 먼저 잡아줍니다. section 태그 안에는 클래스명이 slider__wrap인 div 박스, 그 안에는 클래스명이 slider__img인 div 박스를 만들어 주고, slider__img 박스 안에는 이미지 5장을 삽입해 주었습니다.

<section id="sliderType01">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider">
                <img src="../assets/img/effect_bg11-min.jpg" alt="이미지1">
            </div>
            <div class="slider">
                <img src="../assets/img/effect_bg12-min.jpg" alt="이미지2">
            </div>
            <div class="slider">
                <img src="../assets/img/effect_bg13-min.jpg" alt="이미지3">
            </div>
            <div class="slider">
                <img src="../assets/img/effect_bg14-min.jpg" alt="이미지4">
            </div>
            <div class="slider">
                <img src="../assets/img/effect_bg15-min.jpg" alt="이미지5">
            </div>
        </div>
    </div>
</section>

CSS 소스

각각의 이미지가 담긴 slider 클래스에는 absolute와 z-index 속성을 부여함으로써 이미지를 층층이 쌓아, 한 장처럼 보이게끔 작업해 주었습니다.

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 520px;
}
.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: 260px;
    }
}

JAVASCRIPT 소스

자바스크립트로는 먼저 선택자를 만들어 주었습니다. 이후 currentIndex라는 변수를 선언하고, setInterval 함수를 사용했습니다. 3초마다 변수의 값이 1씩 커지되, 이미지 슬라이드의 총 개수를 초과하게 되면 기본값(0)에서 다시 값이 증가되도록 작업해 주었습니다.

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

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

// 1000 : 1초, 1초에 한 번씩 실행한다는 의미
setInterval(() => {
    let nextIndex = (currentIndex + 1) % sliderCount;  // 다음 이미지
    // sliderCount의 값이 5이므로, 1, 2, 3, 4, 0, 1, 2, 3, 4, 0...

    // slider[0].style.opacity = "0";  // 첫번째 이미지 가리기
    // slider[1].style.opacity = "1";  // 두번째 이미지 보여주기

    // 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";  // 첫번째 이미지 보여주기

    slider[currentIndex].style.opacity = "0";  // 현재 이미지 가리기
    slider[nextIndex].style.opacity = "1";  // 다음 이미지 보여주기

    currentIndex = nextIndex;
},3000)

---

결과

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