캐러셀을 만드는 방법

• translate를 이용한다
• 래퍼를 전체를 이동시킨다
• 인피니티 스크롤 구현
  • 앞뒤에 사기 슬라이드를 추가
    • transition none을 이용해서 눈속임
• 앞뒤로 왔다 시키기
  • 초기 저장했다가 계산해서 반영
• 굳이 많은 DOM을 필요하지않는다
  • 새로 개선 해보자
• swipe와 drag를 구분해보자
  • 시간으로 구분
• translateX

const sliderVisibleWidth = slider.offsetWidth;

function getTotalItemsWidth(items) {
  const { left } = items[0].getBoundingClientRect();
  const { right } = items[items.length - 1].getBoundingClientRect();
  return right - left;
}

const totalItemsWidth = getTotalItemsWidth(items);

const maxXOffset = 0;
const minXOffset = - (totalItemsWidth - sliderVisibleWidth);

• 문제 키때문에 뭔가 가다가 멈춘다

  • 키를 toArray의 키를 넣어주니 동작함

  

  Why do keys change when children are used with React.Children.toArray?

참고

Swiper React Components

swiper/src/react at master · nolimits4web/swiper

import React from 'react';

function processChildren(c) {
  const slides = [];
  React.Children.toArray(c).forEach((child) => {
    if (child.type && child.type.displayName === 'SwiperSlide') {
      slides.push(child);
    } else if (child.props && child.props.children) {
      processChildren(child.props.children).forEach((slide) => slides.push(slide));
    }
  });
  return slides;
}

function getChildren(c) {
  const slides = [];

  const slots = {
    'container-start': [],
    'container-end': [],
    'wrapper-start': [],
    'wrapper-end': [],
  };

  React.Children.toArray(c).forEach((child) => {
    if (child.type && child.type.displayName === 'SwiperSlide') {
      slides.push(child);
    } else if (child.props && child.props.slot && slots[child.props.slot]) {
      slots[child.props.slot].push(child);
    } else if (child.props && child.props.children) {
      const foundSlides = processChildren(child.props.children);
      if (foundSlides.length > 0) {
        foundSlides.forEach((slide) => slides.push(slide));
      } else {
        slots['container-end'].push(child);
      }
    } else {
      slots['container-end'].push(child);
    }
  });

  return { slides, slots };
}

export { getChildren };

React로 Carousel(캐러셀) 만들기 (3) - translateX를 이용한 구현

scroll-snap-type - CSS: Cascading Style Sheets | MDN