오늘은 제이쿼리를 이용해서 마켓컬리의 슬라이드쇼를 연습해보려고 한다. 목적은 제이쿼리로 뭐라도 하나 해보는 것이다.
<!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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<style>
/* 슬라이드쇼를 감싸는 부모 wrapper */
.wrapper {
width: 900px;
position: relative;
margin: 0 auto;
background-color: gray;
/* 넘치는 부분 자르기 */
overflow: hidden;
}
.slideList {
left: 0;
position: relative;
/* 이미지 1개의 width * 이미지의 개수 */
width: 4500px;
height: 360px;
/* 눈에 잘 보이라고 테스트 겸 보더 추가 */
border: 1px solid red;
}
.slideList .slideImg {
float: left;
width: 900px;
}
img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="slideList">
<div class="slideImg">
<img
alt=""
src="https://i.ytimg.com/vi/Z9k_B3olENs/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDLlbh-M5wXR6C56szZajtehljT7w"
/>
</div>
<div class="slideImg">
<img
alt=""
src="https://i.ytimg.com/vi/INak4ORss18/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDNkMRHbfnucpxOdluaXHdreyNMVw"
/>
</div>
<div class="slideImg">
<img
alt=""
src="https://i.ytimg.com/vi/ThGFHtE-Dzw/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCsIE7N9jELw6MoFq-cnje7Clih_Q"
/>
</div>
<div class="slideImg">
<img
alt=""
src="https://i.ytimg.com/vi/ThGFHtE-Dzw/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCsIE7N9jELw6MoFq-cnje7Clih_Q"
/>
</div>
<div class="slideImg">
<img
alt=""
src="https://i.ytimg.com/vi/ThGFHtE-Dzw/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLCsIE7N9jELw6MoFq-cnje7Clih_Q"
/>
</div>
</div>
</div>
<script>
/*좌우 슬라이드 */
$(document).ready(function () {
setInterval(slide, 3000);
});
let slide_num = 1;
function slide() {
$(".slideList").animate({ left: slide_num * -900 }); // 슬라이드 안 이미지의 width값이 900일때 기준
// 전체 이미지 장수 -1
if (slide_num == 4) {
slide_num = 0;
} else {
slide_num += 1; //계속 1씩 더한다.
}
}
/*페이드인/아웃 슬라이드.*/
// $(document).ready(function () {
// setInterval(slide, 3000);
// $(".slideImg").eq(0).fadeIn(300);
// });
// let slide_num = 0;
// function slide() {
// $(".slideImg").eq(slide_num).fadeOut(300);
// if (slide_num == 2) {
// slide_num = 0;
// } else {
// slide_num += 1;
// }
// $(".slideImg").eq(slide_num).fadeIn(300);
// }
</script>
</body>
</html>세로 슬라이드는 계산하다가 자꾸 말아먹어서 때려쳤다.
참고사이트
https://ninefloor.github.io/web-practice/work/30/
https://ninefloor.tistory.com/45?category=876356
일단 쓰고 본다