[JS] 캐러셀 만들기 (4개 사진)*

캐러셀 만들기 (사진4개)
- 버튼 클릭으로 이동

HTML

 <!-- 캐러셀 시작 -->
      <div class="container">
        <div style="overflow: hidden">
          <div class="slide-container">
            <div class="slide-box">
              <img src="banner/banner1.jpg" alt="banner1" />
            </div>
            <div class="slide-box">
              <img src="banner/banner2.jpg" alt="banner2ss" />
            </div>
            <div class="slide-box">
              <img src="banner/banner3.jpg" alt="banner3" />
            </div>
            <div class="slide-box">
              <img src="banner/banner4.jpg" alt="banner4" />
            </div>
            <!-- float 해제를 위한 요소 추가 -->
     	    <div style="clear: both"></div>
          </div>
        </div>
        <!-- 캐러셀 위치이동 버튼 -->
        <div class="carousel-button">
          <button class="first-button"></button>
          <button class="second-button"></button>
          <button class="third-button"></button>
          <button class="fourth-button"></button>
        </div>
      </div>

CSS

/* 캐러셀 */
.container {
  /* max-width: 1200px; */
  width: 100%;
  /* height: 200px; */
  /* padding: 0 20px 0 20px; */
}

.slide-container {
  width: 400vw;
  overflow: hidden;
  justify-content: center;
}

.slide-box {
  width: 100vw;
  float: left; /* 왼쪽으로 치우치게 해준다. */
  text-align: center;
  padding: 0 20px;
  /* border-radius: 5vw; */
}

.slide-box img {
  /* 사진 조금 잘리는 걸 아래의 코드로 해결.*/
  width: 100%;
  max-width: 920px;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: auto;
}

/* 캐러셀 버튼 디자인 */
.carousel-button button {
  width: 15px; /* 버튼의 너비 */
  height: 15px; /* 버튼의 높이 */
  border-radius: 50%; /* 원형 모양을 만듭니다 */
  background-color: #ffbe01; /* 버튼의 배경색*/
  cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */
  margin: 0 5px; /* 버튼 사이의 간격 */
  border: none; /* 버튼 테두리 제거 */
}

.carousel-button button:hover {
  background-color: #db0009; /* 버튼 호버 시 배경색 변경 */
  opacity: 0.7; /* 호버 시 버튼 불투명도를 100%로 설정 */
}
/* 버튼 중앙정렬 */
.carousel-button {
  text-align: center;
  padding: 10px; /*간격조정*/
}

각각 버튼 (차례로 1,2,3,4) 누르면

차례로 사진 나오게 하기.

 

.slide-container 너비를 400vw로 설정함으로써, 이 컨테이너는 뷰포트의 4배 너비를 가진다.

.slide-box 에 width: 100vw; 를 부여함으로써, 각 슬라이드가 뷰포트의 전체 너비를 차지

 

<div style="clear: both"></div> 이거 float:left; 를 사용했으니 추가해주도록 한다.

---

 

 2 번째 사진으로 보여지게 하기

2번 버튼을 눌러야 두 번째 사진이 보여짐 ( 슬라이드 되면서 )
- 2번 버튼 하나만 기능구현 

 transform : translateX(-100vw);  사용

transition:all 1s; - 부드럽게 움직이기

.slide-container {
  width: 400vw;
  overflow: hidden;
  justify-content: center;
  transition: all 1s;
}

미리 부드럽게 이동하는

transition:all 1s; 적용하기.

// 캐러셀 만들기.
$(".first-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(0vw)");
});

$(".second-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-100vw)");
});

$(".third-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-200vw)");
});
$(".fourth-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-300vw)");
});

각 버튼 클릭하면 이동.

---

오류 발생

- 화면을 늘릴 시 초반에 사진이 2개로 보임.

HTML

   <!-- 캐러셀 시작 -->
      <div class="container">
        <div style="overflow: hidden">
          <div class="slide-container">
            <div class="slide-box">
              <img src="banner/banner1.jpg" alt="banner1" />
            </div>
            <div class="slide-box">
              <img src="banner/banner2.jpg" alt="banner2ss" />
            </div>
            <div class="slide-box">
              <img src="banner/banner3.jpg" alt="banner3" />
            </div>
            <div class="slide-box">
              <img src="banner/banner4.jpg" alt="banner4" />
            </div>
            <!-- float 해제를 위한 요소 추가 -->
            <div style="clear: both"></div>
          </div>
        </div>
        <!-- 캐러셀 위치이동 버튼 -->
        <div class="carousel-button">
          <button class="first-button"></button>
          <button class="second-button"></button>
          <button class="third-button"></button>
          <button class="fourth-button"></button>
        </div>
      </div>

CSS

/* 캐러셀 */
.container {
  /* max-width: 1200px; */
  width: 100%;
  /* height: 200px; */
  /* padding: 0 20px 0 20px; */
}

.slide-container {
  width: 400vw;
  overflow: hidden;
  justify-content: center;
  transition: all 1s;
}

.slide-box {
  width: 100vw;
  float: left;
  text-align: center;
  padding: 0 20px;
  /* border-radius: 5vw; */
}

.slide-box img {
  /* 사진 조금 잘리는 걸 아래의 코드로 해결.*/
  width: 100%;
  max-width: 920px;
  height: auto;
  border-radius: 20px;
  display: block;
  margin: auto;
}

/* 캐러셀 버튼 디자인 */
.carousel-button button {
  width: 15px; /* 버튼의 너비 */
  height: 15px; /* 버튼의 높이 */
  border-radius: 50%; /* 원형 모양을 만듭니다 */
  background-color: #ffbe01; /* 버튼의 배경색*/
  cursor: pointer; /* 마우스 오버 시 커서 모양 변경 */
  margin: 0 5px; /* 버튼 사이의 간격 */
  border: none; /* 버튼 테두리 제거 */
  opacity: 0.8; /* 버튼 불투명도를 50%로 설정 */
}

.carousel-button button:hover {
  background-color: #db0009; /* 버튼 호버 시 배경색 변경 */
  opacity: 0.7; /* 호버 시 버튼 불투명도를 100%로 설정 */
}
/* 버튼 중앙정렬 */
.carousel-button {
  text-align: center;
  padding: 10px; /*간격조정*/
}

 

JS

// 캐러셀 만들기.
$(".first-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(0vw)");
});

$(".second-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-100vw)");
});

$(".third-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-200vw)");
});
$(".fourth-button").on("click", function () {
  $(".slide-container").css("transform", "translateX(-300vw)");
});

오류원인

.slide-container {
  width: 400vw;
  overflow: hidden;
  justify-content: center;
  transition: all 1s;
}

이 부분에 transition 을 줬더니 생김.

.slide-container {
  width: 400vw;
  justify-content: center;
  /* overflow: hidden; */
  /* transition: all 1s; */
}

이렇게 없애 주면 화면 늘릴 때 2개씩 나오는 현상이 사라진다.

overflow: hidden 은 이미 html 에 있으므로 지워줌.