Collection
Post cover

Top 19 React Carousels

Collection of free React carousel code examples: responsive, horizontal and vertical.

Horizontal Card Carousel in React Native

#js

Author: Marius Reimer

Links: demo and code

Made with: JS

A card carousel allows you to display data in a horizontal swipe view, in the form of cards. Each card has a specific snap position that the user may scroll to, instead of having a free scrolling. This should give a better experience in case the user has to choose between different categories for example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Native Headphones Carousel

Author: Catalin Miron

Links: demo and code, youtube

Made with: HTML / CSS / JS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

3D Cover Flow in React!

Author: @keyframers

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Carousel

Author: Alex Taietti

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Grid Carousel

Author: YY Chang

Links: demo and code

Made with: HTML / CSS / JS

React responsive carousel component with grid layout to easily create a carousel like photo gallery, shopping product card or anything you want.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

React Alice Carousel

Author: maxmarinich

Links: github page

React responsive component for building content galleries, content rotators and any React carousels.

React Carousel Version 2

Author: librarylai

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

React Material UI Carousel

Author: Ioannis Maliaras

Links: demo and code

Made with: HTML / CSS / JS

A generic, extendible carousel UI component for React using Material UI. It switches between given children using a smooth animation. Provides next and previous buttons. Also provides interactible bullet indicators.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: material-ui/core, material-ui/icons

React Slider With Hover Effect

Author: Ryan Mulligan

Links: demo and code, tutorial

Made with: HTML (Pug) / CSS (SCSS) / JS (Babel)

A slider/carousel built with React. The x and y coordinates of the current slide are set to CSS variables to create dynamic transition effects on mouseover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: react-transition-group.js

React Carousel Slides

Author: Ryan Santos

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

React Native Anchor Carousel

Author: Le Hoang Nam

Links: demo and code

Made with: HTML / CSS / JS

A simple swipeable carousel for React Native which anchor two side of list.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Post cover

React Native Looped Carousel

Author: Phil Rukin

Links: github page

Looped carousel for React Native.

Post cover

React Carousel

Author: Brainhub

Links: github page

There are some great carousels (like slick) that do not have real React implementations. This library provides you with carousel that is not merely a wrapper for some jQuery solution, can be used as controlled or uncontrolled element (similar to inputs), and has tons of useful features.

Flicking

Author: NAVER

Links: github page, home page

Reliable, flexible and extendable carousel used by 30 million people everyday.

Post cover

Pure React Carousel

Author: Express Labs

Links: github page, home page

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.

React Carousel

Author: Fernando Gomes

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

React carousel - custom version.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: foundation-icons.css, react-with-addons.js

Carousel (React)

Author: Andy Pagas

Links: demo and code

Made with: HTML / CSS (SCSS) / JS (Babel)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: foundation-icons.css, react-with-addons.js

Post cover

React Native Snap Carousel

Author: Archriss

Links: github page

Swiper/carousel component for React Native featuring previews, multiple layouts, parallax images, performant handling of huge numbers of items, and more. Compatible with Android & iOS.

Post cover

React Native Carousel Control

Author: Gustavo Machado

Links: github page

React Native Carousel control with support for iOS and Android.

React View Pager

Author: Travis Arnold

Links: github page

Slider/Carousel powered by React Motion.

Did you like the post? Share it with your friends!

Follow us on social networks

Feedback