슬라이드 이펙트 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)";    // 이미지 width값(800px) * 이미지 번호

    // 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);    // setTimeout으로 마지막에서 첫번째로 돌아올 때의 움직임 부드럽게 함

        currentIndex = 0;   // 마지막 사진 왔을 때 초기화시킴
    }
}
        setInterval(sliderEffect, 2000);

<body class="img09">
    <header id="header">
        <h1>JAVASCRIPT SLIDER EFFECT 03</h1>
        <p>슬라이드 이펙트 ③ - 좌로 움직이기(연속적으로)</p>
        <ul>
            <li><a href="sliderEffect01.html">01</a></li>
            <li><a href="sliderEffect02.html">02</a></li>
            <li class="active"><a href="sliderEffect03.html">03</a></li>
            <li><a href="sliderEffect04.html">04</a></li>
            <li><a href="sliderEffect05.html">05</a></li>
            <li><a href="sliderEffect06.html">06</a></li>
            <li><a href="sliderEffect07.html">07</a></li>
        </ul>
    </header>
    <!-- // header -->

    <main id="main">
        <section id="sliderType01">
            <div class="slider__wrap">
                <div class="slider__img">
                    <div class="slider__inner">
                        <div class="slider"><img src="../assets/img/effect_bg10.jpg" alt="이미지1"></div>
                        <div class="slider"><img src="../assets/img/effect_bg01.jpg" alt="이미지2"></div>
                        <div class="slider"><img src="../assets/img/effect_bg03.jpg" alt="이미지3"></div>
                        <div class="slider"><img src="../assets/img/effect_bg02.jpg" alt="이미지4"></div>
                        <div class="slider"><img src="../assets/img/effect_bg04.jpg" alt="이미지5"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- // main -->

    <footer id="footer">
        <div class="modal__wrap">
            <div class="modal__btn">
                <label for="btn">소스 보기</label>
            </div>
            <div class="modal__cont">
                <div class="modal__box">
                    <div class="title">
                        <span class="dot" aria-label="true"></span>
                        <div class="tabs">
                            <div class="active">
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>JavaScript</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>HTML</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                            <div>
                                <span class="favicon">
                                    <svg width="16" height="16" viewBox="0 0 18 18" fill="none" aria-hidden="true" focusable="false">
                                        <circle cx="9" cy="9" r="9" fill="#fff"></circle>
                                        <path d="M18 9C18 13.9706 15.4688 3.09375 9 10.125C2.53125 17.1562 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="orange"></path>
                                        <path d="M18 9C18 13.9706 14.9062 0.84375 8.29688 6.1875C1.6875 11.5312 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C13.9706 0 18 4.02944 18 9Z" fill="yellow"></path>
                                    </svg>
                                </span>
                                <en>CSS</en>
                                <span class="close">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                        <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                        <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                    </svg>
                                </span>
                            </div>
                        </div>
                        <span class="plus" aria-label="true">
                            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                                <path d="M2.5 8H13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M8 2.5V13.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>
                        </span>
                    </div>
                    <div class="cont">
                        <div class="active">
<pre><code lang="language-js">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)";    // 이미지 width값(800px) * 이미지 번호

    // 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);    // setTimeout으로 마지막에서 첫번째로 돌아올 때의 움직임 부드럽게 함

        currentIndex = 0;   // 마지막 사진 왔을 때 초기화시킴
    }
}
        setInterval(sliderEffect, 2000);
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-html">
    html
</code></pre>
                        </div>
                        <div>
<pre><code lang="language-css">/* 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;  /* 총 이미지 6개 */
    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: '이미지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: 224px;
    }
}
</code></pre>
                        </div>
                    </div>
                </div>
                <div class="modal__close">
                    <span class="close">
                        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true" focusable="false">
                            <path d="M12.5 3.5L3.5 12.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            <path d="M12.5 12.5L3.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                        </svg>
                    </span>
                </div>
            </div>
        </div>
    </footer>
    <!-- // footer -->
</body>

/* 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;  /* 총 이미지 6개 */
    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: '이미지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: 224px;
    }
}