캐러셀 컴포넌트

[YUNH7]

넘길 프롭스 react-slick에서 swiper로 변경 아래 댓글 봐주세요(23.06.07) 1. 캐러셀 세팅 객체(참고 https://react-slick.neostack.com/docs/api) 2. 자식 요소 간격(ex. 0, 1rem, 10px ..) ~~3. 자식 요소 ** 개별 자식 요소 만들 때 className="slider-item" 부여해주세요!~~ 안해도되게 수정했습니다(23.06.04)

import Carousel from '../components/Carousel';
const carouselSettings = { // 캐러셀 세팅
    dots: true, 
    infinite: false, 
    speed: 500,
    slidesToShow: 2.5, // 한번에 보일 요소 개수
    slidesToScroll: 1, // 한번 슬라이드 시 넘어갈 요소 개수
    swipeToSlide: true, // slidesToScroll 무시하고 부드럽게 넘기기
 };
return (
  <Carousel settings={carouselSettings} gap="3rem">
    {배열.map((test) => (
      <Card test={test} />
    ))}
  </Carousel>
)

[YUNH7]

import Carousel from '../components/Carousel';
import SomeCard from '../components/SomeCard';

const carouselSettings = { // 캐러셀 세팅
    slidesPerView: 1, // 한 번에 보일 요소 개수
    spaceBetween: 12, // 요소 사이 갭 px
    breakpoints: { // 반응형
      480: { // 480px 이상일 때
        spaceBetween: 24,
        slidesPerView: 1.5,
      },
      768: {
        spaceBetween: 36,
        slidesPerView: 2.5,
      },
    },
  };
  return (
    <Carousel
      settings={carouselSettings} // 세팅객체
      dataArr={Card에 뿌려줄 데이터 배열}
      Card={SomeCard} // 데이터(dataArr의 요소)를 담을 카드 컴포넌트
    />
  )