이미지 슬라이드 유형 03

이미지 슬라이드 유형 03

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

width값을 4800으로 늘려 복사 붙여넣기 하였을 때 자연스러우도록 하였습니다..

 

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

03. javascript

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

 

    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)";
            // 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){
                setTimeout(() => {
                    sliderInner.style.transition = "0s";
                    sliderInner.style.transform = "translateX(0px)";
                }, 700);

                currentIndex = 0;
            }
        }
        setInterval(sliderEffect, 1500);

원본 소스 보여주기

원본 사이트 보여주기