Dragonball Online Goku Hand
본문 바로가기
Effect(자바스크립트 활용)/Slider Effect 슬라이드이펙트

"슬라이더이펙트 03" : 좌로 움직이기(연속)

by 별의 코비 2022. 9. 2.
728x90

🎞 슬라이드 이펙트 - 좌로 움직이기(연속적으로)

📌 흔히 우리가 아는 슬라이드 효과입니다. 왼쪽으로 슥-슥- 지나가는 슬라이드 효과를 만들어봅시다! + 연속적으로!!!

슬라이드 이펙트 - 좌로 움직이기(연속적으로) 효과 완성⭐️

움직이는 슬라이드가 궁금하다면?💡 원본 소스보기 CSS 소스보기

HTML

코드가 굉장히 길어서 코드 보기를 펼쳐 봐주세요 :)
슬라이드에 들어갈 이미지를 넣어준 후 소스보기에 넣어줘야 할 틀을 구성해줍니다.

코드 보기 
<body class="img03">
    <header id="header">
        <h1>javascript Slider Effect03</h1>
        <p>슬라이드 이펙트 - 좌로 움직이기(연속적으로)</p>
        <ul>
            <li><a href="sliderEffect01.html">1</a></li>
            <li><a href="sliderEffect02.html">2</a></li>
            <li class="active"><a href="sliderEffect03.html">3</a></li>
            <li><a href="sliderEffect04.html">4</a></li>
            <li><a href="sliderEffect05.html">5</a></li>
            <li><a href="sliderEffect06.html">6</a></li>
            <li><a href="sliderEffect07.html">7</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_bg02.jpg" alt="이미지1"></div>
                        <div class="slider"><img src="../assets/img/effect_bg06.jpg" alt="이미지2"></div>
                        <div class="slider"><img src="../assets/img/effect_bg07.jpg" alt="이미지3"></div>
                        <div class="slider"><img src="../assets/img/effect_bg018.jpg" alt="이미지4"></div>
                        <div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <!-- main -->
    <footer id="footer">
        <div class="modal__wrap">
            <div class="modal__btn">소스보기</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" aria-label="true">
                                    <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>
                                <em>JAVASCRIPT</em>
                                <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" aria-label="true">
                                    <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>
                                <em>HTML</em>
                                <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" aria-label="true">
                                    <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>
                                <em>CSS</em>
                                <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">
                            <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 class="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 ;   //이미지 가로값 //위드값 구할 수 있음 offsetWidth
//첫번째 이미지 이미지 슬라이드 끝난 후 반복되게 복사
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사 //첫번째 요소 선택 firstElementChild //cloneNode(true) 이미지 복사 : true라고 적어줘야함

sliderInner.appendChild(sliderClone);   //첫번째 이미지를 마지막에 넣어줌 //appendChild 자식요소 넣어주는 것

function sliderEffect(){
    //초에 사진 증가
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";
    sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"
    // sliderInner.style.transform = "translateX(-800px)";
    // sliderInner.style.transform = "translateX(-1600px)";
    // sliderInner.style.transform = "translateX(-2400px)";
    // sliderInner.style.transform = "translateX(-3600px)";
    // sliderInner.style.transform = "translateX(-4000px)";
    // sliderInner.style.transform = "translateX(-4800px)";
    //마지막 사진에 위치했을 때
    if(currentIndex == sliderCount){
        //setTimeout 시간 지정해주고 효과 주는 것
        setTimeout(() => {
            sliderInner.style.transition = "0s"
            sliderInner.style.transform = "translateX(0px)";
        }, 700);
        
        currentIndex = 0;
    } 
}
setInterval(sliderEffect, 2000);
</code></pre>
                        </div>
                        <div>
<pre><code class="language-html"><section id="sliderType01">
    <div class="slider__wrap">
        <div class="slider__img">
            <div class="slider__inner">
                <div class="slider"><img src="../assets/img/effect_bg02.jpg" alt="이미지1"></div>
                <div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지2"></div>
                <div class="slider"><img src="../assets/img/effect_bg07.jpg" alt="이미지3"></div>
                <div class="slider"><img src="../assets/img/effect_bg018.jpg" alt="이미지4"></div>
                <div class="slider"><img src="../assets/img/effect_bg05.jpg" alt="이미지5"></div>
            </div>
        </div>
    </div>
</section>
</code></pre>
                        </div>
                        <div>
<pre><code class="language-css">/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* slider__img :  이미지 보이는 영역*/
.slider__img {
    position: relative;
    width: 800px;
    height: 450px;
    /* 나머지 이미지 가리기 */
    overflow: hidden; 
}
/* slide__inner : 이미지를 감싸고 있는 부모 : 움직이는 부분 */
.slider__inner {
    display: flex;
    flex-wrap: wrap;
    width: 4800px; /*위에를 써주고 이걸 써주어야 가로로 정렬됨 , 첫이미지 복사했으니까 기존 4000에서 4800으로 변경해주어야함*/ 
    height: 450px;
    /* position: relative; 제이쿼리 썼을 때 이미지 넘겨지게 설정->제이쿼리에서 따로 설정해줌 */
}
/* slider : 개별적인 이미지 */
.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;
}
/* z-index 필요없음 */
.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: 250px;
    }
}
</code></pre>
                        </div>
                        <div></div>
                        <div></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>

CSS

부분적인 CSS입니다. 미디어쿼리도 사용했습니다.
전체적인 CSS를 보시려면 위 CSS보기를 참고해주세요!

코드 보기 
/* slider */
.slider__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* slider__img :  이미지 보이는 영역*/
.slider__img {
    position: relative;
    width: 800px;
    height: 450px;
    /* 나머지 이미지 가리기 */
    overflow: hidden; 
}
/* slide__inner : 이미지를 감싸고 있는 부모 : 움직이는 부분 */
.slider__inner {
    display: flex;
    flex-wrap: wrap;
    width: 4800px; /*위에를 써주고 이걸 써주어야 가로로 정렬됨 , 첫이미지 복사했으니까 기존 4000에서 4800으로 변경해주어야함*/ 
    height: 450px;
    /* position: relative; 제이쿼리 썼을 때 이미지 넘겨지게 설정->제이쿼리에서 따로 설정해줌 */
}
/* slider : 개별적인 이미지 */
.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;
}
/* z-index 필요없음 */
.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: 250px;
    }
}

Javascript

자바스크립트를 이용하여 슬라이드가 연속으로 화면 전환을 하는 방법을 찾아야 합니다.
주석에 설명이 있으니 주석을 참고해주세요!

코드 보기 
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 ;   //이미지 가로값 //위드값 구할 수 있음 offsetWidth
//첫번째 이미지 이미지 슬라이드 끝난 후 반복되게 복사
let sliderClone = sliderInner.firstElementChild.cloneNode(true); //첫번째 이미지 복사 //첫번째 요소 선택 firstElementChild //cloneNode(true) 이미지 복사 : true라고 적어줘야함
sliderInner.appendChild(sliderClone);   //첫번째 이미지를 마지막에 넣어줌 //appendChild 자식요소 넣어주는 것
function sliderEffect(){
    //초에 사진 증가
    currentIndex++;
    sliderInner.style.transition = "all 0.6s";
    sliderInner.style.transform = "translateX(-"+ sliderWidth * currentIndex +"px)"
    // sliderInner.style.transform = "translateX(-800px)";
    // sliderInner.style.transform = "translateX(-1600px)";
    // sliderInner.style.transform = "translateX(-2400px)";
    // sliderInner.style.transform = "translateX(-3600px)";
    // sliderInner.style.transform = "translateX(-4000px)";
    // sliderInner.style.transform = "translateX(-4800px)";
    //마지막 사진에 위치했을 때
    if(currentIndex == sliderCount){
        //setTimeout 시간 지정해주고 효과 주는 것
        setTimeout(() => {
            sliderInner.style.transition = "0s"
            sliderInner.style.transform = "translateX(0px)";
        }, 700);
        
        currentIndex = 0;
    }
}
    setInterval(sliderEffect, 2000);

'Effect(자바스크립트 활용) > Slider Effect 슬라이드이펙트' 카테고리의 다른 글

"슬라이더이펙트 06" : 이미지 슬라이드(버튼, 닷메뉴, 무한)  (1) 2022.10.21
"슬라이더이펙트 05" : 이미지 슬라이드(버튼, 닷메뉴)  (0) 2022.10.17
"슬라이더이펙트 04" : 좌우로 움직이기(버튼을 이용하여)  (11) 2022.09.19
"슬라이더이펙트 02" : 좌로 움직이기  (3) 2022.08.30
"슬라이더이펙트 01" : 트랜지션 효과  (4) 2022.08.30

관련글

댓글

티스토리툴바