분홍분홍 코딩 프로젝트

Image slider Lv.1 본문

옛 포스트/Project

Image slider Lv.1

봄나물소녀 2021. 2. 24. 22:43

쉽다고 생각했는데 2시간이 걸린 Lv.1의 slider.

앞 날이 걱정되지만 어쩌랴.

조막만한 근자감이라도 갖고 헤쳐나가야지. 

오늘도 고생했다.

내일 바로 Lv.2의 slider와 다른 프로젝트를 하나 더 만들 생각이다.

todoList가 생각보다 진도가 안 나간다. 진득히 시간을 가져야하나.

 

앞으로..

  • html, css 숙달해야해
  • 좀 더 복잡한 javascript 시도하기

만들 것.

  1.  양 옆으로 넘어가는 2개의 버튼을 JS로 제어해보기.
  2.  사진들이 한 자리에서만 나타나게 하기. 

핵심

  •  [html]
    - container > (slider+img) + prevBtn + nextBtn
  •  [css]
    - container와 같은 크기로 사진들을 맞추기
    - absolute로 겹치기
    - .showing 에 블록과 z-index 주기
    - 태그별 z-index의 순서에 유의
    - transition , animation, keyframes의 사용
  • [JS]
    - prev, next 버튼을 눌렀을 때 이벤트 만들기
    - 기준값 1로 잡아놓기
    - classList add와 remove
    - 삼항연산자

<html>

<!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>Document</title>
    <link rel="stylesheet" href="slider2-1.css" />
    <script defer src="slider2-1.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="slider">
        <div class="slide_01 showing"><img src="1.jpg" alt="" /></div>
        <div class="slide_02"><img src="2.jpg" alt="" /></div>
        <div class="slide_03"><img src="3.jpg" alt="" /></div>
        <div class="slide_04"><img src="4.jpg" alt="" /></div>
        <div class="slide_05"><img src="5.jpg" alt="" /></div>
        <div class="slider__bg"></div>
    </div>
      
          <div class="prevBtn">&#10094</div>
          <div class="nextBtn">&#10095</div>
      
    </div>
  </body>
</html>

 

<css>

img {
  width: 600px;
  height: 300px;
}

.container {
  width: 600px;
  height: 300px;
  position: relative;
}

.slide_01 {position: absolute;}
.slide_02 {position: absolute;}
.slide_03 {position: absolute;}
.slide_04 {position: absolute;}
.slide_05 {position: absolute;}

.slider__bg {
  position: absolute;
  width: 600px;
  height: 300px;
  background-color: black;
  z-index: 0;
}
.prevBtn,
.nextBtn {
  position: absolute;
  cursor: pointer;
  top: 45%;
  font-size: 15px;
  padding: 15px 7px;
  border-radius: 3px;
  background-color: rgba(223, 223, 223, 0.5);
  transition: all 1s;
  z-index: 2;
}

.nextBtn {
  right: 0;
}

.prevBtn:hover,
.nextBtn:hover {
  background-color: rgba(255, 245, 111, 0.5);
}

.showing {
  display: block;
  z-index: 1;
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<JavaScript>

 

'use strict'


const prevBtn = document.querySelector(".prevBtn"),
nextBtn = document.querySelector(".nextBtn");

let currNum = 1;
const SHOWING_CN="showing";


function handlePreBtn(){
    let target = document.querySelector(`.slide_0${currNum}`);
    target.classList.remove(SHOWING_CN);
    currNum = currNum - 1 > 0 ? currNum - 1: 5;
    target = document.querySelector(`.slide_0${currNum}`);
    target.classList.add(SHOWING_CN); 
}
prevBtn.addEventListener("click", handlePreBtn);

function handleNextBtn(){
    let target = document.querySelector(`.slide_0${currNum}`);
    target.classList.remove(SHOWING_CN);
    currNum = currNum + 1 < 6 ? currNum + 1 :  1;
    target = document.querySelector(`.slide_0${currNum}`);
target.classList.add(SHOWING_CN);
}
nextBtn.addEventListener("click", handleNextBtn);

 

완성작.
좌우 잘 넘어간다.

이제 자야지 :)

'옛 포스트 > 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.2  (0) 2021.02.25
Chrome web - Random Background image  (0) 2021.02.24
'옛 포스트/Project' Related Articles more