whatisthis?

practice - js ) 슬라이드 페이지 (1) 버튼형 본문

PRACTICE/SELF

practice - js ) 슬라이드 페이지 (1) 버튼형

thisisyjin 2022. 3. 11. 15:23

슬라이드 페이지  

(1) 버튼형

 

 

index.html (style 내장)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slide Banner</title>
    <style>
      * {
        box-sizing: border-box;
      }

      .outer {
        border: 6px solid #525252;
        width: 300px;
        height: 200px;
        margin: 0 auto;
        overflow-x: hidden;
      }

      .inner-grp {
        display: flex;
        transition: all 0.3s ease-out;
        height: 100%;
      }

      .inner {
        padding: 0 16px;
        color: #fff;
        text-align: center;
      }

      .inner:nth-of-type(1) {
        background-color: rgb(209, 0, 0);
      }
      .inner:nth-of-type(2) {
        background-color: rgb(255, 248, 49);
      }
      .inner:nth-of-type(3) {
        background-color: rgb(60, 0, 255);
      }

      .btn-grp {
        text-align: center;
      }

      .btn-grp button {
        border: none;
        border-radius: 10px;
        background-color: #525252;
        color: #fff;
        padding: 10px 20px;
        width: 100px;
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="inner-grp">
        <div class="inner">
          <h2>First</h2>
        </div>
        <div class="inner">
          <h2>Second</h2>
        </div>
        <div class="inner">
          <h2>Third</h2>
        </div>
      </div>
    </div>
    <div class="btn-grp">
      <button class="button-left">⬅Left</button>
      <button class="button-right">Right➡</button>
    </div>
    <script src="app.js"></script>
  </body>
</html>

 

app.js

// Div 사이즈 동적 조절

const outer = document.querySelector(".outer");
const innerGrp = document.querySelector(".inner-grp");
const inners = document.querySelectorAll(".inner");

let currentIndex = 0;

inners.forEach(inner => {
  inner.style.width = `${outer.clientWidth}px`;
  console.log(outer.clientWidth);
});

innerGrp.style.width = `${outer.clientWidth * inners.length}px`;

// Event Listener

const buttonLeft = document.querySelector(".button-left");
const buttonRight = document.querySelector(".button-right");

buttonLeft.addEventListener("click", () => {
  currentIndex--;
  currentIndex = currentIndex < 0 ? 0 : currentIndex;
  innerGrp.style.marginLeft = `-${outer.clientWidth * currentIndex}px`;
});

buttonRight.addEventListener("click", () => {
  currentIndex++;
  currentIndex =
    currentIndex >= inners.length ? inners.length - 1 : currentIndex;
  innerGrp.style.marginLeft = `-${outer.clientWidth * currentIndex}px`;
});

margin-left 값을 음수로 줘서 하나씩 땡기는 원리.

 

그리고, 삼항연산자 부분은 잘 보면

 

1 마이너스한 값이 0보다 작으면 ? >> -1로 안가고 0으로 남아있게 하기

1 플러스한 값이 inners.length(여기선 3)보다 크거나같으면? >> inners.length-1로 남아있게 하기 (마지막 인덱스번호)

 

 

 

 

 

 

result

 

 

 

 

스타일말고 js를 이용한 문법을 위주로 실습했음.

 

'PRACTICE > SELF' 카테고리의 다른 글

practice - css ) 슬라이드 페이지 - CSS only (JS❌)  (0) 2022.03.11
practice - js ) 슬라이드 페이지 (2) 터치형(드래그)  (0) 2022.03.11
practice - css / js ) Tab Menu  (0) 2022.03.11
practice - css / jquery ) j쿼리로 아코디언메뉴 만들기 + 추가  (1) 2022.03.10
practice - css / jquery ) j쿼리로 아코디언메뉴 만들기  (0) 2022.03.10
'PRACTICE/SELF' Related Articles more