<!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;
}
#wrap div{
width: 100%; height: 100%;
color: bisque;
line-height: 400px;
text-align: center;
font-size: 50px;
position: absolute;
top: 0;
left: 0;
display: none;
}
#wrap .box1{background-color: dodgerblue; display: block;}
#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;}
</style>
</head>
<body>
<div id="wrap">
<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>
<ul class="arrow">
<li class="prv">
<button>Prev</button>
</li>
<li class="nxt">
<button>Next</button>
</li>
</ul>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
// next를 클릭하면 현재 슬라이드에서 다음 슬라이더로 전환
// 마지막 슬라이드일 경우 첫 슬라이드로 돌아오기 .(infinite)
// 화면 전환은 fadeIn(), fadeOut()
$(".nxt").on("click", function() {
var i = $(".view").index(); // 0
$("#wrap div").eq(i+1).stop().fadeIn().addClass("view");
$("#wrap div").eq(i+1).siblings().stop().fadeOut().removeClass("view");
if ($(".box5") == 0) {
$("#wrap div").eq(0).stop().fadeIn().addClass("view");
}
});
$(".prv").on("click", function() {
var j = $(".view").index(); // 0
$("#wrap div").eq(j-1).stop().fadeIn().addClass("view");
$("#wrap div").eq(j-1).siblings().stop().fadeOut().removeClass("view");
});
</script>
</body>
</html>
Engineering is the closest thing to magic that exists in the world.