작동이 안돼요...
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="slide.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
<title>Document</title>
</head>
<body>
<div style="overflow: hidden">
<div class="slide-container">
<div class="slide-box">
< img src="car1.png">
</div>
<div class="slide-box">
< img src="car2.png">
</div>
<div class="slide-box">
< img src="car3.png">
</div>
</div>
</div>
<button class="slide-1">1</button>
<button class="slide-2">2</button>
<button class="slide-3">3</button>
<script>
$('.slide-2').on('click', function() {
$('.slide-container').css('transform', 'translateX(-100vw)');
});
</script>
<script>
src = " https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
</script>
</body>
</html>
css
.slide-container {
width: 300vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 100%;
}
.slide-container {
width: 300vw;
transition: all 1s;
transform: translateX(-100vw);
}
