캐러셀은 여러개의 이미지나 영상을 슬라이더 형태로 만드는 것이다.
html,css,js 를 이용하여 만들어보자
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Carousel</title>
</head>
<body>
<div class="carousel-wrapper">
<div class="carousel">
<img
사진1
/>
<img
사진2
/>
<img
사진3
/>
</div>
</div>
<button class="prev" type="button">prev</button>
<button class="next" type="button">next</button>
<script src="./index.js"></script>
</body>
</html>
먼저 캐러셀을 넣을 컨테이너와 리소스(예제에서는 이미지) 이전, 다음 버튼을 만들어준다.
CSS
* {
box-sizing: border-box;
}
.carousel-wrapper {
width: 500px;
height: 300px;
}
.carousel-wrapper > .carousel {
display: flex;
transform: translate3d(0, 0, 0);
transition: transform 0.2s;
}
.carousel-wrapper > .carousel > img {
width: 500px;
height: 300px;
}
넓이 500px, 높이 300px 캐러셀을 만든다.
사진을 순서대로 하나씩 슬라이딩 시키며 보려 사진을 감춘다.
세로 정렬 되어있는 사진들을 가로 정렬을 한다.
캐러셀은 좌, 우로 슬라이딩 하며 리소스를 보여주기 때문에 이 안보이는 리소스들을 가로로 정렬시켜주어야 한다.
각각의 이미지들도 캐러셀 컨터이너에 맞도록 넓이와 높이를 지정해주었다.
이제 js로 이제 이전, 다음 버튼을 구현해주면 된다.
JS
직접 이벤트를 선언하여 클릭 했을 때 반응하여 이미지가 넘어가도록 할 것이다.
const prevButton = document.querySelector('.prev');
const nextButton = document.querySelector('.next');
const carousel = document.querySelector('.carousel');
let index = 0;
prevButton.addEventListener('click', () => {
if (index === 0) return;
index -= 1;
carousel.style.transform = `translate3d(-${500 * index}px, 0, 0)`;
});
nextButton.addEventListener('click', () => {
if (index === 2) return;
index += 1;
carousel.style.transform = `translate3d(-${500 * index}px, 0, 0)`;
});
이전 버튼을 클릭할 때부터 생각해보면, 우리는 첫 리소스에 접근해 있을 때 이전 버튼이 클릭이 되면 안된다.
즉, index가 0일 때 이다.
그래서 이전 버튼 이벤트에는 index가 0이면 return을 하여 이벤트를 무효화 시켜줄 것이다.
그렇다면 다음 버튼도 마찬가지로 리소스는 총 3개이기 때문에 index가 2일 때 return 시켜준다면 이벤트가 무효화 될 것이다.
전자는 ReFlow, 후자는 RePaint라고 부른다.
리소스를 다시 생각해보면 총 3개의 리소스가 있고 현재 0부터 시작하게 된다.
이 index를 활용하여 x축을 이동시키면 된다는 것을 알게되었다.
추가로 현재 캐러셀의 넓이가 500px인 것을 감안하여 index가 증가할 수록 width가 좌로 밀려나게 되면(감소) 오른쪽에 있는 다른 리소스를 볼 수 있다는 것을 유추할 수 있다.
여기서 (-)를 하는 부분은 밀어내기 라고 생각하면 된다. 우리가 최초에 볼 리소스는 넓이가 500px 이다.
하지만 가로로 정렬된 오른쪽 리소스를 보기 위해서는 원래 있었던 리소스는 좌로 밀려나야 할테고, 오른쪽에 있던 리소스는 캐러셀 컨테이너에 위치해야한다.
캐러셀의 넓이는 500px이고 첫 리소스는 0부터 시작하여 500px까지를 차지하고 있으니, 다음 리소스는 500px 이후에 있을 것이다.
즉, 현재의 넓이를 왼쪽에 동일한 넓이만큼 밀어낸다면? 다음 리소스가 기존에 있는 리소스에 자리를 차지한다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] 마우스 위치대로 따라다니는 효과 주기 (0) | 2023.04.30 |
|---|---|
| [JavaScript] setInterval() 함수, setTimeout() 함수 (0) | 2023.04.27 |
| [JavaScript] localStorage란? (0) | 2023.04.18 |
| [JavaScript] 스크롤시 한 섹션씩 이동하기 (0) | 2023.04.14 |
| [JavaScript] 자바스크립트 객체, 내장 객체 정리 (1) | 2023.04.10 |
댓글