<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#wrap {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 1000px;
height: 400px;
/* overflow : hidden; */
}
.track {
display: flex;
flex-wrap: wrap;
position: relative;
/* width: 5000px; */
/* position: absolute는 부모 요소 중에서 포지션 값을 갖고 있는 요소를 기준 */
/* position: relative는 기존에 위치하면 자리에서 이동 */
/* position : fixed는 윈도우를 기준으로 위치를 고정 */
}
.track div {
width: 1000px; height: 100%;
color: bisque;
line-height: 400px;
text-align: center;
font-size: 50px;
}
#wrap .box1{background-color: dodgerblue;}
#wrap .box2{background-color: tomato}
#wrap .box3{background-color: darkseagreen}
#wrap .box4{background-color: mediumpurple}
#wrap .box5{background-color: turquoise}
.arrow {
list-style: none;
padding: 0;
position: fixed;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 100%;
padding: 0 5%;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
button { padding: 20px 30px; }
.auto {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div id="wrap">
<div class="track">
<div class="box1 view">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</div>
</div>
<ul class="arrow">
<li class="prv">
<button>Prev</button>
</li>
<li class="nxt">
<button>Next</button>
</li>
</ul>
<button class="auto">Auto play</button>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
var boxWidth = $(".track div").width();
var boxLength = $(".track div").length;
console.log("박스 너비 : " + boxWidth);
console.log("박스 갯수 : " + boxLength);
var trackWidth = boxLength * boxWidth;
console.log("트랙 너비 : " + trackWidth);
$(".track").css("marginLeft", -boxWidth);
$(".track div:last-child").prependTo(".track");
$(".track").width(trackWidth);
console.log(trackWidth);
/*
$(선택자).appendTo(요소);
해당 선택자를 특정 요소의 마지막 자식으로 추가
$(선택자).prependTo(요소);
해당 선택자를 특정 요소의 첫 번째 자식으로 추가
*/
// position에서 left값을 사용
$(".nxt").on("click", function() {
$(".track").animate({
left : -boxWidth
}, function() {
$(".track").css("left", 0); //css()
$(".track div:first-child").appendTo(".track");
});
});
$(".prv").on("click", function() {
$(".track").animate({
left : +boxWidth
}, function() {
$(".track").css("left", 0);
$(".track div:last-child").prependTo(".track");
});
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.