[jQuery] 인디케이터를 사용한 이미지 슬라이드
24 Oct 2021 -
1 minute read
인디케이터를 사용한 이미지 슬라이드 만들기
See the Pen 이미지 슬라이드 - 인디케이터 by Jinsol (@losuif) on CodePen.
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>Indicator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="visual">
<div id="pic">
<div><a href="#">
<img src="https://images.unsplash.com/photo-1634214564164-42b834f37e41?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDQ0fGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="1">
</a></div>
<div><a href="#">
<img src="https://images.unsplash.com/photo-1634119418593-dbb72fcedc3e?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDUxfGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="2">
</a></div>
<div><a href="#">
<img src="https://images.unsplash.com/photo-1633895138226-796e9bb242d8?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDg3fGhtZW52UWhVbXhNfHxlbnwwfHx8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="3">
</a></div>
<div><a href="#">
<img src="https://images.unsplash.com/photo-1626744287208-2ceda957181d?ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzM3xobWVudlFoVW14TXx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="4">
</a></div>
</div>
<!-- div#pic 이미지 -->
<div id="control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
<!-- div#control 인디케이터 -->
</div>
<!-- div#visual -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CSS
/* RESET -> */
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
a {
font-family: "돋움";
font-size: 12px;
color: #000;
text-decoration: none;
}
/* <- RESET */
#visual {
width: 1000px;
margin: 20px auto;
position: relative;
/* position: relative -> 하위 요소 중에 pos:absolute, fixed, .. 존재 */
}
#pic {
height: 563px;
overflow: hidden;
position: relative;
box-shadow: 1px 5px 10px 2px #666;
}
#pic > div {
position: absolute;
left: 0;
top: 0;
display: none;
}
#pic > div > a > img {
width: 1000px;
}
#control {
position: absolute;
width: 100%;
left: 0;
bottom: 30px;
text-align: center;
}
#control a {
display: inline-block;
width: 26px;
height: 26px;
background: #000;
color: #fff;
font-weight: bold;
line-height: 26px;
font-size: 0.8em;
border-radius: 50%;
margin: 0 2px
}
#control a.on {
color: #000;
background: #fff;
}
JavaScript
$(function(){
$("#control > a:first").addClass("on");
$("#pic > div:first").show();
$("#control > a").click(function() {
event.preventDefault();
// a 요소 클릭 시 페이지 이동 금지 (화면이 위로 이동하지 않는 효과)
const idx = $(this).index();
// 0, 1, 2, 3 > 배열로 처리하기 위함
$(this).addClass("on").siblings().removeClass("on");
$("#pic > div").filter(":visible").stop(true).fadeOut(350);
$("#pic > div").eq(idx).stop(true).fadeIn(350);
});
});