내가 만든 이미지 슬라이드

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

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

• 만든다.
  • 이미지를 가로로 배치한다.
    • 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");
  }
});