stream-chat-react icon indicating copy to clipboard operation
stream-chat-react copied to clipboard

WIP: feat: add new Carousel component

Open MartinCupela opened this issue 1 year ago • 0 comments

🎯 Goal

Provide own stream-chat-react carousel that would meet the following:

  1. Enable image swiping on mobile device
  2. Enable image swiping and snapping on desktop resolutions by mouse-dragging the images
  3. Simplify the markup compared to that of react-image-gallery which creates multiple layers of position: relative elements

Depends on: https://github.com/GetStream/stream-chat-css/pull/147

Todo:

[ ] Tests ....

🛠 Implementation details

Drag-scrolling logic is separated (useDragScrolling) from the basic carousel navigation (useCarouselController). The drag-scrolling logic can be disabled and navigation can be performed with arrow buttons on the sides of the carousel aperture.

🎨 UI Changes

Desktop

carousel_desktop.webm

Mobile

carousel_mobile.webm

MartinCupela avatar Jul 11 '22 07:07 MartinCupela