슬라이드 이펙트03

prev next

Source

JAVASCRIPT

HTML

CSS

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 : 가로 값 구하는 메서드)
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 : 한 번만 사용

<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>

/* 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;
    }
}