[EFFCET] 이미지 : 슬라이드 유형03

이미지 슬라이드 : 연속적으로 움직이기

지난 시간에는 슬라이드가 좌측으로 이동하는 타입으로 마지막에서 슈루룩~ 첫번째로 돌아갔다면
이번 시간에는 이미지가 자연스럽게 넘어가도록 2초 지날 때마다 이미지가 연속적으로 바뀌는 슬라이드 형식의 페이지를 작업해보겠습니다.😀

---

#1. HTML / CSS 설정하기

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

✏️ HTML 스크립트 보기

<section id="sliderType03">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider">
                    <img src="../assets/img/Mountian_bg01.jpg" alt="이미지6">
                </div>
                <div class="slider">
                    <img src="../assets/img/Mountian_bg02.jpg" alt="이미지7">
                </div>
                <div class="slider">
                    <img src="../assets/img/Mountian_bg03.jpg" alt="이미지8">
                </div>
                <div class="slider">
                    <img src="../assets/img/Mountian_bg04.jpg" alt="이미지9">
                </div>
                <div class="slider">
                    <img src="../assets/img/Mountian_bg05.jpg" alt="이미지10">
                </div>
            </div>
        </div>
    </div>
</section>

! CSS TIP !
1. 이미지를 가로로 연결하기 위해 포지션을 relative로 설정하고 영역에서 벗어나는 이미지를 안보이게 처리하기 위해 overflow: hidden을 설정해줍니다.
2. 이미지가 연속적으로 움직일 수 있도록 첫번째 이미지를 6번째에 추가로 넣습니다. (애니메이션 설정은 스크립트 파트에서!!)
3. 마찬가지로 이미지가 6장이기 때문에 inner의 가로 크기를 +하여 4800px로 설정합니다.

✏️ CSS 스크립트 보기

/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider__img {  /* 이미지가 보이는 영역 */
    position: relative;
    width: 800px;
    height: 450px;
    overflow: hidden;
}
.slider__inner {/* 전체 이미지를 감싸고 있는 부모 : 움직이는 부분 속성주기 */
    display: flex;
    flex-wrap: wrap;
    width: 4800px; /* 총 여섯개의 이미지 */
    height: 450px;
}
.slider {   /* 개별적인 이미지 (각각의 이미지 설정) */
    position: relative;
    width: 800px;
    height: 450px;
}
.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: '이미지6';}
.slider:nth-child(2)::before {content: '이미지7';}
.slider:nth-child(3)::before {content: '이미지8';}
.slider:nth-child(4)::before {content: '이미지9';}
.slider:nth-child(5)::before {content: '이미지10';}
.slider:nth-child(6)::before {content: '이미지6';}

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

---

#2. JAVASCRIPT : 스크립트 짜기

메서드인 setInterval()과 setTimeout() 그리고 크기 속성인 .offsetWidth을 통해 스크립트를 완성해보자!

💡 전체 스크립트 보기

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");   //보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");      //각각의 이미지

let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 총 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값 (offsetWidth : 가로 값 구하는 메서드) sliderImg:요소
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 제이쿼리는 클론만 적기 복사를 위해서는 true 꼭 적기 : 첫번째 자식 요소 복사하기(이미지)

sliderInner.appendChild(sliderClone);   //첫번째 이미지를 마지막에 넣어준다.

function sliderEffect(){
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";

    sliderInner.style.transform = "translateX(-" + sliderWidth * currentIndex + "px)";
    // sliderInner.style.transform = "translateX(-800px)";   800 * 1
    // sliderInner.style.transform = "translateX(-1600px)";  800 * 2
    // sliderInner.style.transform = "translateX(-2400px)";  800 * 3
    // sliderInner.style.transform = "translateX(-3200px)";  800 * 4
    // sliderInner.style.transform = "translateX(-4000px)";  800 * 5
    // sliderInner.style.transform = "translateX(-4800px)";  800 * 6

    //마지막 사진에 위치했을 때 : 효율성보단 간편한 코드 
    // if(currentIndex == sliderCount){
    //     sliderInner.style.transition = "0s";
    //     sliderInner.style.transform = "translateX(0px)";
    //     currentIndex = 0; 
    // 이 코드를 사용하게 된다면 마지막에서 첫번쨰로 넘어갈 때 어색하게 넘어가진다. (애니메이션 적용이 되지 않기 때문.)
    // }

    //마지막 사진에 위치했을 때 : 효율성보단 간편한 코드 
    //첫번째로 넘어갈 때 스무스하게 넘어가도록 한 것.
    if(currentIndex == sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        },700);

        currentIndex = 0; //마지막 사진이 왔을 때 다음 이미지로 넘어가지 않고 다시 초기화 시키기
    }

}
setInterval(sliderEffect,2000);
//setInterval : 여러번 반복시켜 주는 것
//setTimeout : 한 번만 사용

✏️ 스크립트 보기 : 자바스크립트

! JAVASCRIPT TIP !
1. 스크립트에 필요한 선택자를 설정해주고 현재 보여야할 이미지에게 0을 부여하여 첫 순서가 되게 합니다.
2. 다음 이미지가 보이도록 하기 위해 이미지 총 갯수 / 이미지의 가로값을 변수에 저장하여 이미지 가로 * 보여야할 이미지가 되도록 합니다.
3. 첫번째 자식요소를 복사해주는 속성을 사용하여 6번째 이미지까지 보이도록 합니다.
4. 그 외에는 및에 주석을 참고하여 더 자세하게 알아봅시다!

const sliderWrap = document.querySelector(".slider__wrap");
const sliderImg = document.querySelector(".slider__img");   //보여지는 영역
const sliderInner = document.querySelector(".slider__inner"); //움직이는 영역
const slider = sliderWrap.querySelectorAll(".slider");      //각각의 이미지

let currentIndex = 0; //현재 보이는 이미지
let sliderCount = slider.length; //이미지 총 갯수
let sliderWidth = sliderImg.offsetWidth; //이미지 가로 값 (offsetWidth : 가로 값 구하는 메서드) sliderImg:요소
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 제이쿼리는 클론만 적기 복사를 위해서는 true 꼭 적기 : 첫번째 자식 요소 복사하기(이미지)

sliderInner.appendChild(sliderClone);   //첫번째 이미지를 마지막에 넣어준다.

function sliderEffect(){
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";

    //x축으로 이미지를 sliderWidth * currentIndex 만큼 이동시켜서 보이게 해라 : 인덱스가 곱해지면 이미지 영역에서 곱해진 만큼의 px을 이동하기 때문에 다음 이미지가 보이게 되는 것
    sliderInner.style.transform = "translateX(-" + sliderWidth * currentIndex + "px)";

    //첫번째로 넘어갈 때 어색하게 넘어가지 않도록 setTimeout을 통해 복사한 첫번째 이미지(6번째 이미지)에 속성 부여
    if(currentIndex == sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = "translateX(0px)";
        },700); //0.7초에 이미지 넘어가도록 

        currentIndex = 0; //마지막 사진이 왔을 때 다음 이미지로 넘어가지 않고 다시 초기화 시키기
    }
}
setInterval(sliderEffect,2000); //2초에 이미지가 넘어가도록

---

#3. 결과 보기 🎉

원본 소스 보기

원본 페이지 보기