Useful “Carousel” React Component Collection
The carousel is a popular way to show pictures or card contents neatly and automatically. It is always shown on the landing page, for example, like comments or images gallery.
I can still remember how I learned about the small project built with JavaScript. It’s nice to have a ready-to-go component to use.
I will list all the popular carousel React components here.
Note: All the descriptions and features are listed from the official GitHub pages.
- Flicking
It’s a reliable, flexible, and extendable carousel. The very nice documentation demonstrates the usage.
Features (as listed on the official site):
- Flicking is fully written in TypeScript, and every class, property, and event are correctly typed and exported.
- Flicking comes with a rich API. You can use it to create your own customized Flicking & Plugins.
- With the Promise polyfill and flicking-inline CSS, Flicking can support Internet Explorer 9+.
- Flicking is designed to support Server-Side Rendering(SSR) and can be used with famous SSR frameworks like Next.js or Nuxt.
- Flicking can be enhanced with a set of plugins, like AutoPlay, Fade, and Parallax.
- Flicking supports progress, which can help to create the most fluent & smooth animation along the panel movement.
2. react-awesome-slider
From the GitHub description: “React content transition slider. Awesome Slider is a 60fps, lightweight, performant component that renders an animated set of production-ready UI general purpose sliders with full page transition support for Next.js and Gatsby.”
Features:
- Look and feel customisable and extendable via SASS and CSS Variables (custom-properties) (scss main file)
- Media pre-loader
- Touch-enabled
- 60fps animations
- Animated transition recipes
- Extendable via custom plugin HOC components
- FullScreen achieved through the
fillParentprop
3. pure-react-carousel
From the GitHub description: “A highly impartial suite of React components that can be assembled by the consumer to create a carousel with almost no limits on DOM structure or CSS styles. If you’re tired of fighting some other developer’s CSS and DOM structure, this carousel is for you.”
more examples
4. react-id-swiper
From the GitHub description: “A library to use idangerous Swiper as a React component which allows Swiper’s modules custom build.”
You can also get it via CDN.
You can find the documentation here.
5. react-instagram-zoom-slider
From the GitHub description: “A slider component with pinch to zoom capabilities inspired by Instagram.”
6. react-responsive-carousel
From the GitHub description: “Powerful, lightweight and fully customizable carousel component for React apps.”
Features
Responsive
Mobile friendly
Swipe to slide
Mouse emulating touch
Server side rendering compatible
Keyboard navigation
Custom animation duration
Auto play w/ custom interval
Infinite loop
Horizontal or Vertical directions
Supports images, videos, text content or anything you want. Each direct child represents one slide!
Supports external controls
Highly customizable:
Custom thumbs
Custom arrows
Custom indicators
Custom status
Custom animation handlers
7.react-slick
This library is a port of the jQuery slick library. Documentation available here.
8. keen-slider
As per the GitHub description, “The HTML touch slider carousel with the most native feeling you will get.”
Features:
Library Agnostic: Works well in JavaScript, TypeScript, React, Vue, Angular, React Native etc.
Lightweight: No dependencies, only ~5.5KB gzipped
Mobile First: Supports multi touch and is fully responsive
Great Performance: Native touch/swipe behavior
Compatible: Works in all common browsers, including >= IE 10 and React Native
Open Source: Freely available under the MIT license
Extensible: Rich but simple API
9. swiper
Swiper — is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Features:
Tree-shakeable: Only modules you use will be imported into your app’s bundle.
Mobile-friendly: It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps.
Library Agnostic: Swiper doesn’t require any JavaScript libraries like jQuery, which makes Swiper much smaller and faster. It can be safely used with libraries such as jQuery, Zepto, jQuery Mobile, etc
1:1 Touch movement: By default, Swiper provides 1:1 touch movement interaction, but this ratio can be configured through Swiper settings
Mutation Observer: Swiper has an option to enable Mutation Observer, with this feature Swiper will be automatically reinitialized and recalculate all required parameters if you make dynamic changes to the DOM, or in Swiper styles itself
Rich API: Swiper comes with a very rich API. It allows creating your own pagination, navigation buttons, parallax effects and many more
RTL: Swiper is the only slider that provides 100% RTL support with correct layout
Multi Row Slides Layout: Swiper allows a multiple row slides layout, with a few slides per column
Transition Effects: Fade, Flip, 3D Cube, 3D Coverflow
Two-way Control: Swiper may be used as controller for any number of other Swipers, and even be controlled at the same time
Full Navigation Control: Swiper comes with all required built-in navigation elements, such as Pagination, Navigation arrows and Scrollbar
Flexbox Layout: Swiper uses modern flexbox layout for slides layout, which solves a lot of problems and time with size caclulations. Such layout also allows configuring the Slides grid using pure CSS
Most Flexible Slides Layout Grid: Swiper has a lot of parameters on initialization to make it as flexible as possible. You can control slides per view, per column, per group, space between slides, and many more
Images Lazy Loading: Swiper Lazy Loading delays loading of images in inactive/invisible slides until the user swipes to them. Such feature could make the page load faster and improve Swiper performance
Virtual Slides: Swiper comes with Virtual Slides feature that is great when you have a lot of slides or content-heavy/image-heavy slides so it will keep just the required amount of slides in DOM
Loop mode
Autoplay
Keyboard control
Mousewheel control
Nested sliders
History navigation
Hash navigation
Breakpoints configuration
Accessibility (A11y)
They have a Swiper Studio for ‘no-code Swiper builder’. really cool
Some Related Articles:
Keep up doing what you want. Say hi to all of us on the road to the peak.
Please follow and be my study buddy. Peace.✌️
