Carousel을 "어떤 구조"로! "어떻게"! 만들것인가!! 📝

➡️

적용가능한 옵션 (parameter로 전달)

ex.

DicoJsonCarousel([item1, item2, item3...], 4, autoplay, loop, dots, arrow)

  1. [item1, item2, item3...] : 배열로 슬라이더에 포함할 아이템 전달
  2. 4 : 한번에 움직일 아이템의 갯수 설정
  3. autoplay : 특정시간마다 자동으로 움직임 설정
  4. loop : 순환하는 구조 혹은 페이지 설정
  5. dots : 슬라이더 상단 혹은 하단에 보여줄 현재 페이지, hover/click 시 특정 페이지로 바로 이동
  6. arrow : 화살표를 커스텀할 수 있는 옵션

폴더 & 파일 구조

DicoJsonCarousel.jsx

SliderArrowBtns.jsx

SlideTrack.jsx (⬅️ 얘가 overflow: hidden 을 가질 예정)

SlideList.jsx

Slide.jsx

다이어그램

https://app.diagrams.net/#G1jc46LO2Vips8axhcUHYrbPLGBAfUJ4rg

Version 1.