Carousel 만들기

[코딩애플 JavaScript 입문과 웹 UI개발]  강의 수강 후 배운 것을 정리한 것입니다.
https://codingapple.com/course/javascript-jquery-ui/

 

 

캐러셀은 CSS가 관건이다.

사진이 들어가는 slide list는 사진크기의 3배로 두고

사진을 하나만 보여주는 slide container는 사진크기의 1배로 두고, overflow:hidden을 주면된다.

img {
  vertical-align: bottom;
}

.slide-container {
  overflow: hidden; 
  width: 30vw;
}

.slide-list {
  background-color: grey;
  width: 90vw;
  transition: all 1s;
  display: flex;
}

.slide-box {
  width: 30vw;
}

.slide-box img {
  width: 100%;
}

 

 

그리고 나서 자바스크립트에서는 클릭할때마다 하나 사진크기만큼 왼쪽으로 이동시킨다.

margin-left를 마이너스 사진크기만큼 하는 것이다.

margin-left보다 translateX가 더 자연스럽게 이동한다.

 

사진크기가 30vw일때 아래와 같은 javascript 코드를 사용하면 된다.

document.querySelector('.slide-1').addEventListener('click', () => {
  document.querySelector('.slide-container').style.transform =
    'translateX(0vw)';
});
document.querySelector('.slide-2').addEventListener('click', () => {
  document.querySelector('.slide-container').style.transform =
    'translateX(-30vw)';
});
document.querySelector('.slide-3').addEventListener('click', () => {
  document.querySelector('.slide-container').style.transform =
    'translateX(-60vw)';
});

 

 

중복코드가 많아 수정해보았다. 

참고로 이미지 width를 구해서 px 이동하게 한 방법은
화면을 축소시키는 등 뷰포트를 변경시켰을 때 이상하게 작동했다.
이래서 vw단위를 쓰는거구나 했다.(반응형 페이지를 만들 때 vw, vh단위를 쓴다고 한다.) 

이미지 길이 width 하드코딩할수밖에 없는건가..ㅠㅠ

//let imgWidth = document.querySelector('.slide-box').clientWidth;//실패!
let width = 30;
let list = document.getElementsByClassName('slide');
for(let i = 0; i < list.length; i++ ) {
  document
    .querySelector('.slide-' + (i + 1))
    .addEventListener('click', () => {
    document.querySelector(
      '.slide-list'
   ).style.transform = `translateX(${-width * i}vw)`;
  });
};

 

 

어쨌든 응용하면 번호버튼 아닌 좌 우 버튼으로 이동하는 캐러셀도 만들 수 있다.

CSS 메뉴에 넣으려다가 이미지를 translate하는 개념이 더 어려운 것 같아서 javascript에 넣었다.

캐러셀은 여러가지 방법으로 만들 수 있다.

여러가지 방법을 찾아보고 더 좋은 방법을 찾게된다면 다시 포스팅하겠다. 

 

 

 

코드펜에서 보기

See the Pen carousel by JEONG (@cona) on CodePen.