슬라이드 이펙트03

소스 보기

Javascript

HTML

CSS

const sliderWrap = document.querySelector('.slider__wrap');
const sliderImg = document.querySelector('.slider__img');
const sliderInner = document.querySelector('.slider__inner');
const slider = document.querySelectorAll('.slider');

let currentIndex = 0;
let sliderCount = slider.length;
let sliderWidth = sliderImg.offsetWidth; // 이미지 가로 값 구하는 메서드
let sliderClone = sliderInner.firstElementChild.cloneNode(true); // 첫번째 이미지 복사
sliderInner.appendChild(sliderClone); // 첫번째 이미지를 마지막에 넣어줌

function sliderEffect() {
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";
    sliderInner.style.transform = `translateX(${-sliderWidth * currentIndex}px)`;

    // 마지막 사진에 왔을 때
    if(currentIndex === sliderCount){
        setTimeout(() => {
            sliderInner.style.transition = "0s";
            sliderInner.style.transform = `translateX(0px)`;
        },700)
        currentIndex = 0;
    }
}
setInterval(sliderEffect, 1000);

<main id="main">
    <section id="sliderType01">
        <div class="slider__wrap">
            <div class="slider__img">
                <div class="slider__inner">
                    <div class="slider"><img src="../asset/img/effect_img01.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../asset/img/effect_img03.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../asset/img/effect_img05.jpg" alt="이미지5"></div>
                    <div class="slider"><img src="../asset/img/effect_img07.jpg" alt="이미지7"></div>
                    <div class="slider"><img src="../asset/img/effect_img09.jpg" alt="이미지9"></div>
                </div>
            </div>
        </div>
    </section>
</main>

/* 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;
    /* transform: translateX(-1000px); */
}

.slider{ /* 개별적인 이미지 */
    position: relative;
    width: 800px;
    height: 450px;
}
.slider::before{
    position: absolute;
    left: 5px;
    top: 5px;
    background-color: rgba(143, 142, 142, 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(6)::before{content: '이미지1';}

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