이미지 슬라이드 02

이미지 슬라이드 유형 01

setInterval()를 이용하여 몇 초마다 5개의 이미지가 변하는 유형을 제작하였습니다.

01. HTML

첫번째 sliderEffect의 HTML과 비슷하지만 이미지를 가로로 연결하여 좌로 움직이는 것이기 때문에, 보이기 위한 박스를 만들어 이미지 위에 감쌌습니다.

     <div class="slider__img">
        <div class="slider__inner">
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_06-min.jpg" alt="이미지1"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_07-min.jpg" alt="이미지2"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_08-min.jpg" alt="이미지3"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_09-min.jpg" alt="이미지4"></div>
            <div class="slider"><img src="../../assets/silde/min_jelly/slide_main_10.jpg" alt="이미지5"></div>
        </div>
    </div> 

02. css

가로로 연결하기 위해 position: relative를 부여하고, 원하는 영역만 보기 위해 overflow: hidden으로 가렸습니다.

     .slider__img { /* 이미지 보이는 영역 */
        position: relative;
        width: 800px;
        height: 450px;
        overflow: hidden;
    }

    .slider__inner { /* 이미지를 감싸고 있는 부모 : 움직이는 부분 */
        display: flex;
        flex-wrap: wrap ;
        width: 4000px;
        height: 450px;
    }

    .slider { /* 개별적인 이미지 */
        position: relative;
        width: 800px;
        height: 450px;
    } 

03. javascript

아래는 자바 스크립트 입니다. 선택자를 부여하고 약 1500 = 1.5초에 slider.length인 이미지의 갯수를 움직이면 됩니다. 이때 이미지를 다 보여준다면, 다시 되돌아가야합니다.

    const sliderInner = document.querySelector(".slider__inner")
        const slider = document.querySelectorAll(".slider")

        let currentIndex = 0;  

        sliderInner.style.transition = "all 0.8s"

        setInterval(() => {
            currentIndex = (currentIndex + 1) % slider.length;

            sliderInner.style.transform = "translateX(" + -800 * currentIndex + "px)"
        },1500)

원본 소스 보여주기

원본 사이트 보여주기