Slider 01

슬라이드 이펙트 01 (트랜지션 효과)

이번에는 이미지 슬라이드 형태를 가진 이펙트를 코딩해봤습니다.

HTML

HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다.

코드 보기

    <main id="main">
        <section id="sliderType01">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider"><img src="../assets/img/slide01.jpg" alt="이미지1"></div>
                    <div class="slider"><img src="../assets/img/slide02.jpg" alt="이미지2"></div>
                    <div class="slider"><img src="../assets/img/slide03.jpg" alt="이미지3"></div>
                    <div class="slider"><img src="../assets/img/slide04.jpg" alt="이미지4"></div>
                    <div class="slider"><img src="../assets/img/slide05.jpg" alt="이미지5"></div>
                </div>
            </div>
        </section>
    </main>

CSS

css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다.
또한, z-index를 사용하여 각 위치를 잡아줍니다.

코드 보기

    .slider__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .slider__img {
        position: relative;
        width: 800px;
        height: 450px;
    }
    .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 {
        position: relative;
        width: 400px;
        height: 225px;
        }
    }

script

스크립트는 setInterval 메서드를 사용해주며, nextIndex를 currentIndex대입하는 형태로 진행하여,
nextIndex는 currentIndex에 1더한 값을 sliderCount에 나누고 남은 값을 계속 1, 2, 3, 4, 0, 1, 2, 3, 4...
반복해주는 형태로 스크립트를 짰습니다.

코드 보기

    const sliderWrap = document.querySelector(".slider__wrap");
    const sliderImg = sliderWrap.querySelector(".slider__img");
    const slider = document.querySelectorAll(".slider");
        
    let currentIndex = 0;                      //현재 보이는 이미지
    let sliderCount = slider.length       //이미지 갯수
        
    setInterval(()=> {
    
        let nextIndex = (currentIndex + 1) % sliderCount;   //다음 이미지
        // 1, 2, 3, 4, 5, 6, 7, 8, 9 ...
        // 1 % 5 = 1, 2, 3, 4, 0, 1, 2, 3, 4, 0 ...
    
        slider[currentIndex].style.opacity = "0";    //첫번째 이미지를 안보이게
        slider[nextIndex].style.opacity = "1";         //두번째 이미지를 보이게
    
        currentIndex = nextIndex;
    },1000);

    // 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"    // 첫번째 이미지를 보이게

코드 원본 보기