자바스크립트로 자동 슬라이드 구현하기 (querySelector / setInterval)

copy 사이트 hb paper

 

html / css 영역

display flex 를 이용 

슬라이드 박스안에 슬라이드들을 배치해 가로로 배치해준다 

 

 

전체 박스를 만들어 overflow:hidden 을 사용해 슬라이드 영역을 가려주고 윈도우 창에 꽉 차게 배치 

---

html

 

       <div class="main-slide">
          <div class="slide-box">
            <div class="slide-box__main">
              <a href="#">
                <div class="text-box">
                  <p>그 소중한 가치를 알기에 우리는 돌아가려고 합니다.</p>
                  <h3>자연으로, 스마트하게</h3>
                </div>
                <img src="./images/mv_01.jpg" alt="">
              </a>
            </div>
            <div class="slide-box__main">
              <a href="#">
                <div class="text-box">
                  <p>그 소중한 가치를 알기에 우리는 돌아가려고 합니다.</p>
                  <h3>2</h3>
                </div>
                <img src="./images/mv_02.jpg" alt="">
              </a>
            </div>
            <div class="slide-box__main">
              <a href="#">
                <div class="text-box">
                  <p>그 소중한 가치를 알기에 우리는 돌아가려고 합니다.</p>
                  <h3>3</h3>
                </div>
                <img src="./images/mv_03.jpg" alt="">
              </a>
            </div>
          </div>
        </div>

 

---

css

    .main-slide {
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: fixed;

      .slide-box {
        height: 100%;
        width: 100%;
        display: flex;
        position: relative;

        &__main {
          height: 100%;
          width: 100%;
          // flex: none;
          flex: 0 0 auto;
          /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */

          a {
            width: 100%;
            height: 100%;
            display: block;

            .text-box {
              position: absolute;
              top: 50%;
              width: 100%;
              text-align: center;
              color: #fff;

              p {
                font-size: 18px;
              }

              h3 {
                margin-top: 20px;
                font-size: 50px;
                font-weight: 900;
              }
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
    }

---

자바스크립트 

 

// document.getElementsByClassName()
// dom 을 가져오기위해서 사용
// document objet model 객체임
// html 에서 만든 객체를 가지고 와 속성을 자바스크립트로 바꿈

//---------------------------------------------------------------

//전체 슬라이드 틀 선택
const slideBox = document.querySelector('.slide-box');
console.log('slideBox: ', slideBox);

//갈아낄 슬라이드 - class와 하위 요소 전체 선택 (같은 클래스명이 여러개이기 때문)
const slides = document.querySelectorAll('.slide-box__main');
console.log('slides:', slides);

//현재 슬라이드의 인덱스 번호지정하기
let currentIndex = 0;

//슬라이드 만들 함수 만들기
function mainSlide() {
  currentIndex++; // ++ 증감연산자) 피연산자 +1

  //슬라이드가 끝나면 다시 처음으로 돌아가는 if문
  //slides 의 갯수가 인덱스 번호보다 크거나 같을때 0으로 돌린다
  if (currentIndex >= slides.length) {
    currentIndex = 0;
  }

  // 인덱스에 곱하기 100 (0*100=0 / 1*100=100 / 2*100=200)
  let translatePercent = currentIndex * 100;

  // 슬라이드 위치를 인텍스 * 100 을 곱한 값만큼 위치이동
  slideBox.style.transform = `translate(-${translatePercent}%)`;
}
//슬라이드특 선택시 슬라이드위치변경으로 넘어가게 작성한 함수 넣어줌
slideBox.addEventListener('click', mainSlide);

//setInterval함수로 내가만든 mainSlide 함수가 2초마다 자동 실행
setInterval(mainSlide, 2000);

 

 

다음번엔 페이지 네이션을 넣어서 다시 도전

 

 

---

setInterval 참고 링크

https://www.daleseo.com/js-timer/