Top 14 React Carousel Components [Ranked & Reviewed]

If you want to know which are the best React Carousels we’ll have you covered. We have curated a list for you with the top ones!

1. fullPage.js

fullPage.js for React is a fantastic full-screen carousel and fully configurable. With more than 7 years on its back and 34K+ stars on GitHub, the fullPage.js component is the leader of its kind.

fullPage.js works by scrolling the whole page at once and snapping to the next section when the user scrolls down. It’s fully responsive, has no dependencies, and it’s quite lightweight.

Unlike most other carousels, fullPage.js is meant to be used on full screen and allows you to create vertical and horizontal slides at the same time. This is what makes fullPage.js truly unique.

Besides the 50+ configurable options, it also provides multiple paid extensions to add more features or effects.

It’s ideal for storytelling, marketing, and websites with beautiful visual elements. Also available for Angular, jQuery, and vanilla JavaScript.

2. React Slick

Slick was born as a JavaScript and WordPress plugin and has now been ported to React by a third person.

It contains the features you would expect for any carousel of its kind and a fading effect on top of the usual scrolling one.

A good carousel to consider for responsive sliders.

3. Swiper

When talking about carousels we can’t forget to talk about Swiper. Swiper has 28K+ stars on GitHub and is one of the best carousels out there.

Swiper provides RTL support, multi-row slide layouts, and multiple transition effects. On top of that, it contains some advanced techniques such as Virtual Slides and “Two-way control”, which allows you to use Swiper as the controller for any number of other Swipers.

It provides a big variety of options that can be a bit overwhelming at first but that will for sure provide you much more flexibility in case of need.

Developed by Vladimir Kharlampidi, it’s definitely a carousel to consider.

If you are not yet mastering React you will love our selection with some top online courses for React.js.

4. React Flickity

Flickity is a JavaScript component developed by Desandro and now brought to React by a third person.

It’s a well-designed carousel with great documentation and plenty of options to play with.

Unlike other plugins, Flickity won’t provide many responsive options and can perhaps fail in this aspect compared to others. It also provides an option to add a “show on full screen” button, which is handy.

It is ideal for carousels that won’t need to change much on responsive.

5. React Responsive Carousel

A great component to use for our carousels. It has a good number of options and configurations without getting too crazy, either.

It supports thumbnails out of the box and vertical scrolling, and it comes with a fading effect, too. It also provides more advanced options like server-side rendering, lazy load, and presentation mode.

If you care about the details, remember that the dragging feature isn’t as smooth as in other carousels when releasing the mouse button or taking the finger out of the screen.

Apart from that, notice this plugin is barely maintained anymore. The author is only providing minimum support and merging pull requests.

6. React Swipeable

If you want a simple carousel, this one can be for you. With a very limited amount of options, React Swipeable is an easy-to-use component.

It’s an interesting fact that you can move the slider by following a specific pattern while swiping. It’s not something that you’ll easily find in other components and that also makes it quite unique.

7. Pure React Carousel

An unopinionated component that will provide you with the bare minimum to create your own slider.

Unlike many other carousels, Pure React Carousel won’t provide you with all the styling you’ll need for your carousel. It expects you to create your own styling in the same way that we developers expect the <table> element to contain the minimum amount of style.

In addition to the expected sliding effects, this carousel also provides a zooming option. Something not very common too!

Apart from that, this carousel puts its main focus on being a WCAG accessible carousel. So, if accessibility is what you care about, you might want to consider this carousel!

8. React AwesomeSlider

As its own name says, React AwesomeSlider is an awesome slider. I couldn’t have put it better.

What makes it different from other sliders is the kind of transition it provides. From cube 3d transitions to fold-out, scaling ones, etc.

The number of options it provides isn’t too big, and therefore, it is not as customizable as others.

It can not contain multiple items on the carousel as others can, but as long as this is not a problem this is a great option to choose from. Especially if you care about the transition effects!

9. Nuka Carousel

A pretty complete and functional carousel. It’s definitely a more simple component than many others but it has all you need for a basic slider.

It also supports vertical scrolling and three different kinds of transitions. Scroll, fade, and scroll 3d. On top of that, it has an extra option to turn zoom on.

The component is still maintained, and it has a good adoption, too.

10. React Swipe

Based on the JavaScript library Swipe.js, this carousel is also a bit more basic than many others, but it does its job pretty well, and it’s quite lightweight (although it comes at a cost).

It aims to provide a basic solution for touch devices and won’t support dragging with the mouse.

If you are looking for simplicity for touch devices, this can be a good option. With few configurable options, it’s hard to go wrong while using it.

11. React Image Gallery

If you want something simple yet functional, this slider meets those needs.

It is not as sophisticated as other carousels but it does it job well. It also contains a couple of interesting options such as the one showing the pagination and the “show on full-screen” icon that can be quite useful for galleries.

It also provides a way to add thumbnails to the main carousel and supports RTL navigation. And on top of that, it comes with some render functions so we can create our own renders for things like the navigation, the play/pause buttons or the items.

12. React Owl Carousel

A React wrapper for the jQuery plugin Owl Carousel.

It relies on jQuery, and therefore, it can be a bit obsolete for some. Apart from that, it works just as expected.

It provides responsive options, URL hashing, lazy load, autoplay, and dragging.

If you don’t mind using jQuery, check out our list of carousels for jQuery.

13. React Id Swiper

Based on Swiper.js, this component is just a wrapper that brings the JavaScript version into React. Probably developed before the official wrapper for React from Swiper.js. It uses Swiper as a dependency.

This component is focused on providing a great mobile experience. Designed specially with mobile websites, mobile web apps, and mobile native/hybrid apps in mind. It works for iOS, Android, Windows Phone, and modern web browsers.

Because it’s only a wrapper around Swiper, this component includes the same configurable options, events, and methods as the main component.

14. React Alice Carousel

A React wrapper around vanilla-swipe and created by the same person.

React Alice Carousel is a simple slider that provides responsive options, fading animations, auto-play mode, RTL support, and drag features. It also contains some more advanced options, such as custom rendering, multiple items in a slide, and a “control strategy” option to customize the navigation elements.

It’s simple to use and configure and you won’t get overwhelmed when using it. Ideal for simple carousels.

Related Articles

• Best books to learn React
• Best Practises for Carousels UI
• Best jQuery Carousels
• Best Angular Carousels