“Dependency-Free” React Carousel Component

Recently, I completed react-gallery-carousel, a “dependency-free” React carousel component with support for touch, mouse dragging, lazy loading, pinch to zoom, thumbnails, modal and keyboard navigation.

Demo: https://yifaneye.github.io/react-galle…


This content originally appeared on DEV Community and was authored by Yifan Ai

react-gallery-carousel controlled by mouse

Recently, I completed react-gallery-carousel, a "dependency-free" React carousel component with support for touch, mouse dragging, lazy loading, pinch to zoom, thumbnails, modal and keyboard navigation.

react-gallery-carousel controlled by touch

Demo: https://yifaneye.github.io/react-gallery-carousel/ (or https://yifanai.com/rgc) ?
GitHub: https://github.com/yifaneye/react-gallery-carousel

Lighthouse report on react-gallery-carousel's demo site
rgc3

react-gallery-carousel component not only supports:

  • Lazy loading
  • Thumbnails
  • Maximization (fullscreen)
  • Finger swiping and pinch zooming
  • Mouse dragging
  • Keyboard navigation
  • Accessibility
  • Instantaneous speed detection; but also supports customization with props. ?

I handcrafted icons, wrote many useful custom hooks and wrote many exquisite functional components to complete this piece of work. ??‍?

Everyone is welcome to ask questions, find issues, make pull requests, make suggestions and give stars on GitHub! ?

Demo: https://yifaneye.github.io/react-gallery-carousel/ (or https://yifanai.com/rgc) ?
GitHub: https://github.com/yifaneye/react-gallery-carousel
npm: https://www.npmjs.com/package/react-gallery-carousel


This content originally appeared on DEV Community and was authored by Yifan Ai


Print Share Comment Cite Upload Translate Updates
APA

Yifan Ai | Sciencx (2021-04-13T13:09:15+00:00) “Dependency-Free” React Carousel Component. Retrieved from https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/

MLA
" » “Dependency-Free” React Carousel Component." Yifan Ai | Sciencx - Tuesday April 13, 2021, https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/
HARVARD
Yifan Ai | Sciencx Tuesday April 13, 2021 » “Dependency-Free” React Carousel Component., viewed ,<https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/>
VANCOUVER
Yifan Ai | Sciencx - » “Dependency-Free” React Carousel Component. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/
CHICAGO
" » “Dependency-Free” React Carousel Component." Yifan Ai | Sciencx - Accessed . https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/
IEEE
" » “Dependency-Free” React Carousel Component." Yifan Ai | Sciencx [Online]. Available: https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/. [Accessed: ]
rf:citation
» “Dependency-Free” React Carousel Component | Yifan Ai | Sciencx | https://www.scien.cx/2021/04/13/dependency-free-react-carousel-component/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts