<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box">
<img src="car1.png" alt="" srcset="">
</div>
<div class="slide-box"><img src="car2.png" alt="" srcset=""></div>
<div class="slide-box"><img src="car3.png" alt="" srcset=""></div>
</div>
</div>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<button class="preSlide">이전</button>
<button class="next">다음</button>
<script>
var 지금사진 = 1;
$('.next').on('click', function(){
if (지금사진 == 1) {
$('.slide-container').css('transform', 'translateX(-100vw)');
지금사진 += 1;
console.log(지금사진);
}
else if (지금사진 == 2){
$('.slide-container').css('transform', 'translateX(-200vw)');
지금사진 += 1;
console.log(지금사진);
}
})
$('.preSlide').on('click', function(){
if (지금사진 == 2) {
$('.slide-container').css('transform', 'translateX(0vw)');
지금사진 -= 1;
console.log(지금사진);
}
else if (지금사진 == 3){
$('.slide-container').css('transform', 'translateX(-100vw)');
지금사진 -= 1;
console.log(지금사진);
}
})
</script>
<script>
//1번 슬라이드 위치0으로 이동
$('.slide-1').on('click', function(){
console.log('slide1');
$('.slide-container').css('transform', 'translateX(0vw)');
})
//2번슬라이드 왼쪽으로 100이동
$('.slide-2').on('click', function(){
console.log('slide2');
$('.slide-container').css('transform', 'translateX(-100vw)');
})
//3번슬라이드 왼쪽으로 200이동
$('.slide-3').on('click', function(){
console.log('slide3');
$('.slide-container').css('transform', 'translateX(-200vw)');
})
$('.preSlide').on('click', function(){
console.log('preSlide');
})
</script>
</body>
</html>
기록과 정리하는것을 계속해서 하려고 노력중이에요 😊