#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/image-carousel-design/component-architecture

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░███████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/image-carousel-design/component-architecture

Repovive

Component Architecture - Image Carousel Design | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Component Architecture

Carousel structure

Design a flexible carousel component.

Component tree:

Carousel
├── CarouselTrack
│   └── CarouselSlide (multiple)
├── PrevButton
├── NextButton
├── Pagination (dots)
└── Thumbnails (optional)

Props interface:

<Carousel
  images={images}
  autoPlay={false}
  interval={3000}
  infinite={true}
  showThumbnails={false}
  onChange={handleSlideChange}
/>

State: Current index, animation direction, autoplay status.