[EFFECT] 이미지 : 슬라이드 유형01

이미지 슬라이드 : 트렌지션 효과 주기

이번 시간에는 2초 지날 때마다 이미지가 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀

---

#1. HTML / CSS 설정하기

! HTML TIP !
각 이미지마다 css설정을 주기 위해 따로 부모를 2번 감싸서 묶어줍니다.

✏️ HTML 스크립트 보기

<section id="sliderType01">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider">
                <img src="../assets/img/city_bg01.jpg" alt="이미지1">
            </div>
            <div class="slider">
                <img src="../assets/img/city_bg02.jpg" alt="이미지2">
            </div>
            <div class="slider">
                <img src="../assets/img/city_bg03.jpg" alt="이미지3">
            </div>
            <div class="slider">
                <img src="../assets/img/city_bg04.jpg" alt="이미지4">
            </div>
            <div class="slider">
                <img src="../assets/img/city_bg05.jpg" alt="이미지5">
            </div>
        </div>
    </div>
</section>

! CSS TIP !
이미지가 겹쳐있기때문에 마지막 이미지만 보이게 됩니다. 때문에 :nth-child()과 z-index를 통해 이미지의 순서를 바꿔줍니다.
* z-index() : 레이어처럼 각 순서를 정해줍니다.

✏️ CSS 스크립트 보기

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {
    position: relative; /* 앱솔루트 기준점 */
    width: 700px;
    height: 400px;
}
.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: 250px;
    }
}

---

#2. JAVASCRIPT : 스크립트 짜기

setInterval()을 통해 스크립트를 완성해보자!
아래의 코드 속 주석과 함께 스크립트를 이해해보도록 합시다:)

💡 전체 스크립트 보기

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; //다음 이미지
    //0,1,2,3,4,5,6,7,8,9........... : 나눗셈을 하지 않으면 처음 이미지로 돌아가지 않는다.
    //%의 경우 : 1,2,3,4,0,1,2,3,4,0....... : sliderCount의 값이 5이므로 5번째 이미지에서 다시 첫번째로 돌아간다.

    //currentIndex가 0일 때 slider[nextIndex]는 +1 돼서 1 
    //slider[currentIndex]가 1일 땐 slider[nextIndex]는 +1 돼서 2 이런식으로 반복됨. 아래처럼 번거롭게 쓸 필요 없다!
    slider[currentIndex].style.opacity = "0"; //첫번째 이미지를 안보이게
    slider[nextIndex].style.opacity = "1"; //두번째 이미지를 보이게

    currentIndex = nextIndex;
    
    //위의 식대로 작업하게 되면 아래 스크립트처럼 모든 이미지를 하나하나 번거롭게 설정 할 필요가 없다.
    // 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"; //첫번째 이미지를 보이게

},2000) //2초마다 바뀜

✏️ 스크립트 보기 : 선택자

먼저 스크립트에 필요한 선택자를 설정해주어서 스트립트를 짤 준비를 합니다.

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = sliderWrap.querySelector(".slider__img"); //부모 요소에서 찾는 것이 더 정확
const slider = sliderWrap.querySelectorAll(".slider");

그 다음 변수를 통해 현재 보이게 할 이미지의 인덱스, 이미지의 총 갯수를 설정합니다.
변수로 정해 두었던 이미지의 총 갯수를 현재의 인덱스에 나누어서 나머지를 구하면 0,1,2,3,4,0,1,2,3,4...로 계속 반복하게 됩니다.
다음 스크립트로 css스타일 중 오파시티로 투명도를 설정하여 이미지 인덱스가 바뀔 때 지난 인덱스들은 투명도를 0으로 하여 안보이게 하고 다음 이미지 인덱스가 1로 되게 하여 보이게 합니다.
현재 이미지 인덱스에게 다음 인덱스가 대입하는 식을 작성하여 0부터 4까지 반복되도록 합니다.
2000은 2초를 의미하며 2초마다 이미지의 인덱스가 1씩 올라 다음 이미지가 보이게 합니다.

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;
},2000);

---

#4. 결과 보기

원본 소스 보기

원본 페이지 보기