TIL 211119

devyoon99·2021년 11월 19일
0

TIL

목록 보기
30/38
post-thumbnail

UI / 내가 만든 이미지 슬라이드

스스로 만들어본 이미지 슬라이드 방식

클래스를 추가함으로써 변화시킴

  • 만든다.
    • 이미지를 가로로 배치한다.
      • float: left;
        • 이미지 한 개를 담는 이미지 박스에 설정한다.
    • 이미지가 한 개만 뜨도록 한다.
      • overflow: hidden
        • 이미지 슬라이더를 div tag에 복붙하고, 그 div에 설정한다.
  • 애니메이션
    • 변화
      • transform: translateX(-100vw);
        • 의미 : 이미지 박스 가로 100vw임, 이미지 컨테이너를 -100vw이동하여, 다른 이미지가 보이도록 했음
  • 이미지 css
    • 전체 컨테이너
      • 폯 300vw
    • 이미지 박스
      • 폯 100vw
    • 이미지
      • 폭 100%
        • 이미지 박스를 전부 차지한다.
//html
<div style="overflow: hidden">
  <div class="slide-container show-1-img">
    <div class="slide-box">
      <img src="img/money.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/coding.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/health.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/cat.jpg" />
    </div>
  </div>
</div>

<button class="slide-1-btn">1</button>
<button class="slide-2-btn">2</button>
<button class="slide-3-btn">3</button>
<button class="slide-4-btn">4</button>
//css
.slide-box {
  width: 100vw;
  float: left; //이미지를 가로로 배치되도록 한다.
}
.slide-box img {
  width: 100%;
}
.slide-container {
  width: 300vw;
  transition: transform 1s;
}
.show-2-img {
  transform: translateX(-100vw);
}
.show-3-img {
  transform: translateX(-200vw);
}
.show-4-img {
  transform: translateX(-300vw);
}
//js 
//1번 버튼클릭하면, 1번 이미지로 이동
$(".slide-1-btn").on("click", function () {
  $(".slide-container").addClass("show-1-img");
  $(".slide-container").removeClass("show-2-img");
  $(".slide-container").removeClass("show-3-img");
  $(".slide-container").removeClass("show-4-img");
});

$(".slide-2-btn").on("click", function () {
  $(".slide-container").removeClass("show-1-img");
  $(".slide-container").removeClass("show-3-img");
  $(".slide-container").removeClass("show-4-img");
  $(".slide-container").addClass("show-2-img");
});

$(".slide-3-btn").on("click", function () {
  $(".slide-container").removeClass("show-1-img");
  $(".slide-container").removeClass("show-2-img");
  $(".slide-container").removeClass("show-4-img");
  $(".slide-container").addClass("show-3-img");
});

$(".slide-4-btn").on("click", function () {
  $(".slide-container").removeClass("show-1-img");
  $(".slide-container").removeClass("show-2-img");
  $(".slide-container").removeClass("show-3-img");
  $(".slide-container").addClass("show-4-img");
});
//오른쪽 버튼클릭하면, 오른쪽 이미지로 이동
$(".slide-left-btn").on("click", function () {
  if ($(".slide-container").hasClass("show-4-img")) {
    $(".slide-container").removeClass("show-1-img");
    $(".slide-container").removeClass("show-2-img");
    $(".slide-container").removeClass("show-4-img");
    $(".slide-container").addClass("show-3-img");
  } else if ($(".slide-container").hasClass("show-3-img")) {
    $(".slide-container").removeClass("show-1-img");
    $(".slide-container").removeClass("show-3-img");
    $(".slide-container").removeClass("show-4-img");
    $(".slide-container").addClass("show-2-img");
  } else if ($(".slide-container").hasClass("show-2-img")) {
    $(".slide-container").removeClass("show-2-img");
    $(".slide-container").removeClass("show-3-img");
    $(".slide-container").removeClass("show-4-img");
    $(".slide-container").addClass("show-1-img");
  }
});

$(".slide-right-btn").on("click", function () {
  if ($(".slide-container").hasClass("show-1-img")) {
    $(".slide-container").removeClass("show-1-img");
    $(".slide-container").removeClass("show-3-img");
    $(".slide-container").removeClass("show-4-img");
    $(".slide-container").addClass("show-2-img");
  } else if ($(".slide-container").hasClass("show-2-img")) {
    $(".slide-container").removeClass("show-1-img");
    $(".slide-container").removeClass("show-2-img");
    $(".slide-container").removeClass("show-4-img");
    $(".slide-container").addClass("show-3-img");
  } else if ($(".slide-container").hasClass("show-3-img")) {
    $(".slide-container").removeClass("show-1-img");
    $(".slide-container").removeClass("show-2-img");
    $(".slide-container").removeClass("show-3-img");
    $(".slide-container").addClass("show-4-img");
  }
});

프로 이미지 슬라이드 개발

오른쪽 버튼 이벤트

핵심 : 변수를 만들고, 현재 상태와 변수를 연결지음

  • let nowPicture = 1; 변수를 만듬
    • 변수와 현재 사진 연결했음
  • 조건문 실행
    • 2번째 사진이 보이게 함
    • 변수에 2로 만듦
  • 반복
if (nowPicture === 1) {
    $(".slide-container").css("transform", "translateX(-100vw)");
    nowPicture = 2;
}
//js 전체 코드
let nowPicture = 1;
$(".slide-right-btn").on("click", function () {
  if (nowPicture === 1) {
    $(".slide-container").css("transform", "translateX(-100vw)");
    nowPicture = 2;
  } else if (nowPicture === 2) {
    $(".slide-container").css("transform", "translateX(-200vw)");
    nowPicture = 3;
  } else if (nowPicture === 3) {
    $(".slide-container").css("transform", "translateX(-300vw)");
    nowPicture = 4;
  }
});

$(".slide-left-btn").on("click", function () {
  if (nowPicture === 4) {
    $(".slide-container").css("transform", "translateX(-200vw)");
    nowPicture = 3;
  } else if (nowPicture === 3) {
    $(".slide-container").css("transform", "translateX(-100vw)");
    nowPicture = 2;
  } else if (nowPicture === 2) {
    $(".slide-container").css("transform", "translateX(0)");
    nowPicture = 1;
  }
});

html 구조

  • div
    • 이미지 컨테이너
      • 이미지 박스
        • 이미지
    • 버튼 
//html 
<div style="overflow: hidden; position: relative">
  <div class="slide-container">
    <div class="slide-box">
      <img src="img/money.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/coding.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/health.jpg" />
    </div>
    <div class="slide-box">
      <img src="img/waitress-.jpg" />
    </div>
  </div>

  <button class="slide-left-btn">
    <i class="fas fa-long-arrow-alt-left"></i>
  </button>
  <button class="slide-right-btn">
    <i class="fas fa-long-arrow-alt-right"></i>
  </button>
</div>

이미지 css

  • 이미지 박스
    • 폯 100vw
  • 전체 컨테이너
    • 모든 이미지 박스 담을 수 있도록
    • 이미지 박스 3개 -> 폭 300vw
  • 이미지
    • 이미지 박스를 전부 차지한다.
    • 폭 100%
  • 이미지를 가로로 배치한다.
    • 이미지 박스에 float: left;설정
  • 이미지가 한 개만 보이고 나머지는 보이지 않게 만든다.
    • 가장 상위의 div tag에 overflow: hidden; 설정
  • 이미지 컨테이너 이동함으로써 변화를 줌
    • transition: transform 1s; 설정
//css
.slide-box {
  width: 100vw;
  float: left;
}
.slide-box img {
  width: 100%;
}

.slide-container {
  width: 400vw;
  transition: transform 1s;

  background-color: tomato;
}

.slide-left-btn {
  position: absolute;
  left: 0px;
  top: 45%;
}

.slide-right-btn {
  position: absolute;
  right: 0px;
  top: 45%;
}

애니메이션

  • transform: translateX(-100vw);
    • 의미 : 이미지 박스 가로 100vw임, 이미지 컨테이너를 -100vw이동하여, 2번째 이미지가 보이도록 했음
  • 3번째 이미지는 처음 transform: translateX(-200vw); 설정하면 된다.
  • 움직이는 것이 이미지 컨테이너 이므로 이미지 컨테이너에 transition: transform 1s; 을 설정한다.

이미지 슬라이드 버튼 이벤트 코드 최종버전

  • let nowPicture = 1; 변수를 만듬
  • 2번째 사진이 보이게 함
    • 이미지 박스 폯은 100vw이다.
    • 첫번째 사진이 보일 때, 사진 컨테이너가 X축 기준으로 -100vw이동하면, 두번째 사진이 보인다.
    • -100 = 변수 * -100
  • 변수에 1을 추가한다.
  • 반복
  • 3번째 사진이 보이게 하려면
    • 첫번째 사진에서 사진 컨테이너가 X축 기준으로 -200vw 이동하면, 세번째 사진이 보인다
    • -200 = 변수 * -100
  • 조건문을 사용한 이유
    • 사용하지 않으면, 조건문이 끝나도 버튼이 계속 작동하여 오른쪽으로 계속이동하여 흰 화면만 보인다.
$(".slide-container").css(
      "transform",
      "translateX(-" + nowPicture + "00vw)"
);
//js 전체코드
let nowPicture = 1;
let 이동;
$(".slide-right-btn").on("click", function () {
  if (nowPicture > 0 && nowPicture < 4) {
    $(".slide-container").css(
      "transform",
      "translateX(-" + nowPicture + "00vw)"
    );
    nowPicture = nowPicture + 1;
  }
});

$(".slide-left-btn").on("click", function () {
  if (nowPicture > 1 && nowPicture <= 4) {
    이동 = (nowPicture - 2) * -100;
    $(".slide-container").css("transform", "translateX(" + 이동 + "vw)");
    nowPicture = nowPicture - 1;
  }
});

UI / 다른 div를 기준으로 버튼을 배치시키기

버튼이 div안에 있어야 한다. 부모 자식 관계

  • 이유 : 이렇게 되어있어야 position: relative"와 position: absolute;을 쓸 수 있다.
  1. 부모 div에 position: relative"
  2. 자식 button에 position: absolute;
  3. 위치 조정 한다 top: 50% 세로를 기준으로 중앙에 배치가능
<div>
  <button></button>
</div>

자바스크립트 / 문자열에 변수 추가하기

"ㅁㅁㅁㅁㅁㅁㅁㅁㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ"
1. 변수를 넣고 싶은 곳을 기준으로 문자열을 쪼갠다.
"ㅁㅁㅁㅁㅁㅁㅁ" "ㅇㅇㅇㅇㅇㅇㅇㅇ"
2. 쪼갠 부분에 ++ 넣는다.
"ㅁㅁㅁㅁㅁㅁㅁ" ++ "ㅇㅇㅇㅇㅇㅇㅇㅇ"
3. ++사이에 변수를 넣는다.
"ㅁㅁㅁㅁㅁㅁㅁ" + i + "ㅇㅇㅇㅇㅇㅇㅇㅇ"

주의할 점 : 문자열이 작은 따옴표로 되어있을 때는, 작은 따옴표로 쪼개야 한다.

profile
devyoon99
dev
이전 포스트

TIL 211118

다음 포스트

TIL 211120

0개의 댓글

관련 채용 정보