자바스크립트 Carousel 구현하기

 

구현을 하기 전에 캐러셀이 무엇인지 알아보자

캐러셀(Carousel)이란 이미지나 카드와 같은 컨텐츠를 쉽게 탐색할 수 있도록 하는 UI 요소이다.

캐러셀 UI의 가장 큰 이점은 각각의 컨텐츠들이 한정된 공간에서도 각각 동일한 크기로 보여질 수 있다는 것이다

 

---

 

자바스크립트로 Carousel 슬라이더 구현하기

1. HTML과 CSS로 뼈대 만들기

1) 사용자가 보게 될 창문 역할을 하며 하나의 엘리먼트 외에는 보이지 않게 가려주는 window
2) 여러 엘리먼트를 내부에 담고 있을 container

3) 각각의 요소를 나타내는 cell

4) 사용자가 동작을 컨트롤 할 수 있게 API역할을 하는 previous 버튼과 next 버튼

 

변수 생성하고 dom 불러오기

// JS
// DOm 불러오기
const CAROUSEL_LENGTH = document.querySelectorAll(".cell").length - 1;

// 캐러셀의 갯수와 현재 캐러셀이 몇 번째인지 나타내는 변수
let current = 0;

 

 

 

2. Prev와  Next에 클릭 이벤트 걸기

// JS
// 캐러셀 주요 DOM 불러오기
const carouselDOM = document.querySelector('.carousel');
const prevBtn = document.querySetpf lector(".prev");
const nextBtn = document.querySelector(".next"); 

// 클릭 이벤트 걸기
function addEvent(){
  prevBtn.addEventListener('click', 콜백함수);
  nextBtn.addEventListener('click', 콜백함수);
};

 

3. transform: translateX()로 컨테이너 밀어주기

클릭 이벤트를 할 때, prevEvent과 NextEvent에 해당하는 콜백 함수를 만들어야 하는데,

가장 먼저 선택된 방향으로 cell의 움직임을 실행시켜야 한다.

 

여기서는 이동 효과를 더해주는 transform 속성을 이용한다.

transform은 굉장히 다양한 값들을 가지고 있지만(matrix, rotate, skew, scale, etc.)가로로 이동하는 효과는 transform: translateX(이동거리)를 이용해 구현할 수 있다.

 

// JS
const nextEvent = () => {
  if (current !== CAROUSEL_LENGTH) {
    $carousel.style.transform = `translateX(${(current + 1) * - 400}px)`;
    current++;
  } else {
    current = 0;
    $carousel.style.transform = `translateX(0px)`;
  }
};

const prevEvent = () => {
  if (current !== 0) {
    current--;
    $carousel.style.transform = `translateX(${current * -400}px)`;
  } else {
    current = CAROUSEL_LENGTH;
    $carousel.style.transform = `translateX(${CAROUSEL_LENGTH * -400}px)`;
  }
};

$nextButton.addEventListener("click", nextEvent);
$prevButton.addEventListener("click", prevEvent);

 

버튼을 클릭했을 때, 현재 current 변수를 계산하고 캐러셀의 transform을 움직여 위치를 바꾸어 주었다.

 

current가 마지막일 때 다음 버튼을 눌렀을 때나, current가 처음일 때 이전 버튼을 눌렀을 때 current 변수를 조정해 주는 작업도 빼 놓지 않았다.

 

 

---

참고 문헌

 

https://velog.io/@grinding_hannah/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80Carousel-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[JavaScript] 자바스크립트로 캐러셀(Carousel) 구현하기

 

https://velog.io/@xnelb013/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A1%9C-%EC%BA%90%EB%9F%AC%EC%85%80Carousel%EA%B5%AC%EC%A1%B0-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[JS] 자바스크립트로 캐러셀(Carousel)구조 구현하기