<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carosel</title>
<style>
.slide-container {
width: 300vh;
transition: all 1s;
}
.slide-box {
width: 100vh;
float: left;
}
.slide-box img {
width: 100%;
}
</style>
</head>
<body>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box"><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/eaf03b25-9e49-4a89-8396-bbbaa828f6d0/car1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220531%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220531T080110Z&X-Amz-Expires=86400&X-Amz-Signature=458fd687683c39844f1facaa1d9be57bd0307789bed2e67c212fdacaeb1f4a16&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22car1.png%22&x-id=GetObject" alt="" /></div>
<div class="slide-box"><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/ac801924-c61a-4d1b-9d9e-98a5eaa083b6/car2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220531%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220531T080137Z&X-Amz-Expires=86400&X-Amz-Signature=027f8c9c4a2df4beaf67847b8a9bb0396d4fc040f42676082dbeafc9b57063b8&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22car2.png%22&x-id=GetObject" alt="" /></div>
<div class="slide-box"><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/f1aca9a2-9611-4012-93b2-8f2148624d0a/car3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220531%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220531T080146Z&X-Amz-Expires=86400&X-Amz-Signature=3158712862e39e0dc5414c7e992c3fcff14339222b2296734ead3350c0e8f855&X-Amz-SignedHeaders=host&response-content-disposition=filename%20%3D%22car3.png%22&x-id=GetObject" alt="" /></div>
</div>
</div>
<button class="previous">이전</button>
<button class="next">다음</button>
<script>
//1번그림좌표 translateX(0vw)
//2번그림좌표 translateX(-100vw)
//3번그림좌표 translateX(-200vh)
const slide = document.querySelector('.slide-container');
const previousBtn = document.querySelector('.previous');
const nextBtn = document.querySelector('.next');
let currentImg = 1;
//다음버튼을 누르면 현재이미지의 위치를 얼만큼 이동해주세요
//다음버튼을 눌렀을 때 현재 이미지가 3번째이면 그 자리에 머물게 해주세요
nextBtn.addEventListener('click', function () {
if (currentImg >= 3) {
slide.style.transform = 'translateX(-200vh)';
} else {
slide.style.transform = `translateX(-${currentImg}00vw)`;
currentImg++;
}
});
//이전버튼을 누르면 현재이미지의 위치를 얼만큼 이동해주세요
previousBtn.addEventListener('click', function () {
slide.style.transform = `translateX(-${currentImg - 2}00vw)`;
currentImg--;
});
</script>
</body>
</html>
프론트엔드 개발하는 사람