사이트 만들기 - 슬라이드 유형01

슬라이드 효과

슬라이드 효과를 만들어 보았습니다.

CSS

Javascript 입니다.
setInterval() 메서드를 사용하여 작업하였습니다. currentIndex를 변수로 만들어 카운트를 해주는 방식을 사용하였습니다.
총 이미지는 5장이고 카운트 해서 5가 넘어가면 첫번째 이미지부터 다시 시작하도록 만들었습니다.
setInterval은 시간을 1000 = 1초 이고 시간을 설정해 이미지가 넘어가는 시간을 설정할 수 있습니다.

javascript 보기

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

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

setInterval(() => {  
    let nextIndex = (currentIndex + 1) % sliderCount; //다음 이미지
    //1,2,3,4,0,1,2,3,4,....
    
    slider[currentIndex].style.opacity = "0";   //첫번째 이미지를 안보이게
    slider[nextIndex].style.opacity = "1";   //두번째 이미지를 보이게

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

    // slider[currentIndex].style.opacity = "0";   //세번째 이미지를 안보이게
    // slider[3].style.opacity = "1";   //네번째 이미지를 보이게

    // slider[currentIndex].style.opacity = "0";   //네번째 이미지를 안보이게
    // slider[4].style.opacity = "1";   //다섯번째 이미지를 보이게

    // slider[4].style.opacity = "0";   //다섯째 이미지를 안보이게
    // slider[0].style.opacity = "1";   //첫째 이미지를 보이게
},3000);

HTML

HTML입니다.
슬라이드에 사용할 이미지를 다운받아서 불러오도록 하였습니다.

HTML보기

<div class="slider__wrap">
    <div class="slider__img">
        <div class="slider"><img src="../assets/img2/effect_bg_02-min.jpg" alt="이미지1"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_03-min.jpg" alt="이미지2"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_04-min.jpg" alt="이미지3"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_05-min.jpg" alt="이미지4"></div>
        <div class="slider"><img src="../assets/img2/effect_bg_07-min.jpg" alt="이미지5"></div>
    
    </div>
</div>

CSS

전체영역에서 높이 또한 vh를 사용하여 전체 영역을 사용하였습니다

CSS보기

.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative;
    width: 800px;
    height: 600px;
    z-index: -1;

}
.slider{
    position: absolute;
    left: 0;
    top: 0; 
}
.slider::before{
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 5px 10px;
}
.slider:nth-child(1){z-index: 5; content:'이미지1';}
.slider:nth-child(2){z-index: 4; content:'이미지2';}
.slider:nth-child(3){z-index: 3; content:'이미지3';}
.slider:nth-child(4){z-index: 2; content:'이미지4';}
.slider:nth-child(5){z-index: 1; content:'이미지5';}
@media (max-width: 800px) {
    .slider__img{
        width: 400px;
        height: 300px;
    }
}

결과

원본 소스 보기