728x90
반응형
캐러셀 만들기 (사진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 에 있으므로 지워줌.
728x90
반응형
'> 포트폴리오 > 맥도날드' 카테고리의 다른 글
[CSS] flex 사용해서 상자 나열하기 (0) | 2024.03.29 |
---|---|
[JS / CSS] 햄버거 언더 메뉴바 만들기 (2) (1) | 2024.03.26 |
[HTML / CSS] 햄버거 언더 메뉴바 만들기 (1) (0) | 2024.03.26 |
[CSS] li 태그 - 가로 정렬, 밑줄 제거 (0) | 2024.03.24 |
[CSS] 화면 늘리면 이미지 커질 때, 이미지 사이즈 설정 (0) | 2024.03.24 |