프로 이미지 슬라이드 개발

오른쪽 버튼 이벤트

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

• 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; 을 설정한다.