Kidsnap Shot (4) - JS infinite slider(SCSS)

참고자료

개요

메인 배너 무한 슬라이더 구현

Infinite Slider 구현 로직(js)

// 전역 변수 할당
const $slideContainer = document.querySelector('.content-slideImg'); 
const $wrapper = document.querySelector('.content-slideImg-wrapper');
const $rightBtn = document.querySelector('.content-slideImg-btn-right');
const $leftBtn = document.querySelector('.content-slideImg-btn-left');
const getImgs = () => document.querySelectorAll('.content-slide-img');
const interval = 5000;
let slides = getImgs();
// 이미지 노드들의 기준 위치를 index로 선언
let index = 1;
// setInterval이 할당되는 변수
let slideId;

// 첫 이미지와 마지막 이미지를 cloneNode를 통해 복제하여 첫 이미지는 가장 마지막에, 마지막 이미지는 가장 첫번째로 복제한다. 이때 img노드는 3개(기존html코드)에서 5개가 된다.
const firstClone = slides[0].cloneNode(true); 
const lastClone = slides[slides.length - 1].cloneNode(true);
firstClone.id = 'first-clone';
lastClone.id = 'last-clone';
$wrapper.append(firstClone);
$wrapper.prepend(lastClone);



const slidesWidth = slides[index].clientWidth;
$wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;

// html img의 실제 컨텐츠 넓이를 변수(slidesWidth)에 할당하고 setinterval을 통해 slidesWidth만큼 이미지가 x축 이동한다. 
const startSlide = () => {
  slideId = setInterval(() => {
    index++;
    $wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;
    $wrapper.style.transition = '.7s';
  }, interval);
};

// 이미지가 끝까지 이동했다면 다시 index를 1로 수정하고 이미지를 처음으로 돌린다.
$wrapper.addEventListener('transitionend', () => {
  slides = getImgs();
  if (slides[index].id === firstClone.id) {
    $wrapper.style.transition = 'none';
    index = 1;
    $wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;
  }
  if (slides[index].id === lastClone.id) {
    $wrapper.style.transition = 'none';
    index = slides.length - 2;
    $wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;
  }
});

// nextButton의 무분별한 클릭으로 index가 늘어나는걸 방지하기 위해 조건을 걸어주고 setInterval의 콜백 함수를 차용한다.
const moveToNextSlide = () => {
  slides = getImgs();
  if (index >= slides.length - 1) return;
  index++;
  $wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;
  $wrapper.style.transition = '.7s';
};

const moveToPreviousSlide = () => {
  if (index <= 0) return;
  index--;
  $wrapper.style.transform = `translateX(${-slidesWidth * index}px)`;
  $wrapper.style.transition = '.7s';
};
$slideContainer.addEventListener('mouseenter', () => {
  clearInterval(slideId);
});
$slideContainer.addEventListener('mouseleave', startSlide);

$rightBtn.addEventListener('click', moveToNextSlide);
$leftBtn.addEventListener('click', moveToPreviousSlide);

startSlide();

DOM Method

clientWidth

• 실제로 보여지고 있는 컨텐츠의 너비값을 가져올 수 있음
  • 높이를 가져온다면 clientHeight
  • element의 전체 크기를 가져오는 메서드는 offsetWidth, offsetHeight

cloneNode

• 선택한 node를 복제한 node를 반환한다.

transitionend 이벤트

• 선택한 node에서 CSS transition 발생하면 생기는 이벤트

CSS

translateX,Y

• 요소를 x,y축으로 이동할 수 있다.

SCSS

SCSS?

$slider-width: 400px;
$slider-height: 300px;

• 무한 슬라이더를 구현하기 위해 레퍼런스를 살펴보면서 위와 같은 코드를 보게 됐는데 도무지 어떤 문법인지 알 수가 없어서 구글에 'What is dollar sign in css'라고 검색해보았다. 그리고 CSS 전처리기(CSS Preprocessor)인 SASS(Syntactically Awesome Style Sheets)/SCSS라는 것을 알게 됐다.

• CSS 전처리기는 쉽게 생각하면 CSS의 확장 기능이라고 생각하면 된다. SCSS 파일로는 웹에서 동작하지 않아 CSS 파일로 컴파일되어 웹에 적용되게 된다.

사용하는 이유?

• 프로젝의 규모가 커질수록 CSS에 대한 유지보수는 점점 어려워진다. 당장 내 프로젝트만 봐도 CSS가 뒤죽박죽 섞여있거나 무분별한 선택자 CSS 적용으로 가독성이 매우 떨어진다. SCSS는 효율적인 CSS 작업을 위해 다양한 기능을 제공하며 대략적인 예시는 아래와 같다.

1. 셀렉터 중첩
- 셀렉터 안에 셀렉터를 집어넣어 CSS의 계층적인 구조를 시각화할 수 있다. 코드 가독성이 매우 올라간다.
2. 변수 선언
- 특정 넓이, 특정 색상을 변수로 할당하여 CSS 값으로 적용할 수 있다. 이는 CSS 협업 간 미세한 오차를 줄여준다. 또한 유지보수에도 효율이 올라간다.

사용방법

• VS code를 이용하여 실시간으로 컴파일 해주는 확장 프로그램을 사용한다.
  • SASS, SASS LINT, live sass compiler

Overflow

• css overflow 속성은 컨텐츠 사이즈가 요소의 박스 모델 사이즈보다 초과된다면 어떻게 처리할 지 정한다.
  • hidden : 넘치는 부분을 감춘다.
  • scroll : 넘치는 부분이 있다면 스크롤바가 생성되어 스크롤할 수 있게 된다.
  • auto : 컨텐츠에 따라 자동으로 상하좌우 스크롤바를 생성한다.