분홍분홍 코딩 프로젝트

Image slider Lv.2 본문

옛 포스트/Project

Image slider Lv.2

봄나물소녀 2021. 2. 25. 11:39

화면 전환에 초점을 맞추어 만든 슬라이더.

좌우 버튼 같은 제어장치는 없지만

각 div 마다 다양한 이미지나 배경을 주면 

여러모로 쓸모가 많을 것 같다. 

 

배운 것

 

  • opacity(불투명성)와 z-index의  차이점. opacity는 각 속성을 0,1로 설정했을 떄 뒤에 오는 것이 겹쳐보이지 않는다. 아예 가린다는 말이다. 0,1 사이의 값으로 설정하면 흐릿하게 보이게 해주겠지.
    z-index는 택도 없다. 그냥 무대뽀다.
  • nth-child( ) 는 형제 태그안에서 순서에 따라 선택시켜준다. ( ) 안에 even, odd를 넣을 수 있음. 
  • Javascript내에서 동일한 클라스 네임을 가진 아이들 중에 첫 번째 것을 선택하고 싶다면
    .class_name : first-child

 

See the Pen eYByemY by hyungsuplee (@VennyLee) on CodePen.

 

 

1) html / css

 

<style>
    .slider {
      width: 100%;
      height: 100vh;
      position: relative;
    }

    body {
      margin: 0;
    }

    .slide_item {
      width: 100%;
      height: 100vh;
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      z-index: 0;
      opacity: 0;
      transition: all 1s ease-in-out;
    }

    .slide_item:nth-child(odd) {
      background-color: peru;
    }

    .slide_item:nth-child(even) {
      background-color: blueviolet;
    }

    .showing {
      z-index: 1;
      opacity: 1;
    }
  </style>

  <body>
    <div class="slider">
      <div class="slide_item showing"><span>1</span></div>
      <div class="slide_item"><span>2</span></div>
      <div class="slide_item"><span>3</span></div>
      <div class="slide_item"><span>4</span></div>
      <div class="slide_item"><span>5</span></div>
      <div class="slide_item"><span>6</span></div>
    </div>
</body>

 

2) Javascript

 

<script>
      const firstSlide = document.querySelector(".slide_item:first-child");

      const SHOWING_CN = "showing";

      function slide() {
        const currSlide = document.querySelector(`.${SHOWING_CN}`);
        if (currSlide) {
          // 만약 현재 슬라이드라면
          currSlide.classList.remove(SHOWING_CN); // 현재 슬라이드에서 SHOWING_CN을 제거한다
          const nextSlide = currSlide.nextElementSibling; // 다음 슬라이드를 정의한다.
          if (nextSlide) {
            // 다음 슬라이드에 왔다면
            nextSlide.classList.add(SHOWING_CN); // 다음 슬라이드에 SHOWING_CN을 붙인다.
          } else {
            // 마지막 슬라이드라면
            firstSlide.classList.add(SHOWING_CN); // 첫 번쨰 슬라이드로 돌아가 SHOWING_CN을 붙인다.
          }
        }
      }

      function init() {
        slide();
        setInterval(slide, 2000); //slide 함수를 2초에 한 번씩 실행시켜준다.
      }
      init();
    </script>

영어 직독직해 하듯 옆에 한국말을 써보니 머릿속에 쏙쏙 들어온다.

 

 

'옛 포스트 > Project' 카테고리의 다른 글

[TIL] Momentum-dash 이슈  (0) 2021.11.29
Drum kit  (0) 2021.03.01
Chrome Web - Getting current weather and location  (0) 2021.02.27
Image slider Lv.1  (0) 2021.02.24
Chrome web - Random Background image  (0) 2021.02.24
'옛 포스트/Project' Related Articles more