html
<!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="./index.css">
</head>
<body>
<div class="slider">
<div class="btns">
<button>좌</button>
<button>우</button>
</div>
<div class="slides">
<div class="active"></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="./index.js"></script>
</body>
</html>
css
.slider {
padding: 50px;
}
button {
font-size: 40px;
}
.slides {
display: flex;
}
.slides > div {
width: 20%;
height: 100px;
border: 10px solid green;
}
.active {
border-color: red !important;
}
js
let order = 0;
/* 좌버튼 */
$('.btns > button').eq(0).on('click', function () {
if(order !== 0) {
order--;
}
$('.slides > div').removeClass('active');
$('.slides > div').eq(order).addClass('active');
})
/* 우버튼 */
$('.btns > button').eq(1).on('click', function () {
if(order !== 4) {
order++;
}
$('.slides > div').removeClass('active');
$('.slides > div').eq(order).addClass('active');
})
$('.slides > div').on('click', function (event) {
/*
* event.target : 생 자바스크립트
*/
const target = $(event.target);
const index = target.index();
order = index;
$('.slides > div').removeClass('active');
$('.slides > div').eq(order).addClass('active');
})
결과 화면