DEV Community

Cover image for My "Dependency-Free" Carousel 🎠 Component
Yifan Ai
Yifan Ai

Posted on • Edited on

My "Dependency-Free" Carousel 🎠 Component

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

Top comments (0)