Collection of free React carousel code examples: responsive, horizontal and vertical. Update of December 2019 collection. 7 new items.

Related Articles

  1. CSS Carousels
  2. Bootstrap Carousels
  3. JavaScript Carousels
  4. jQuery Carousels
  5. Vue Carousels

Author

  • Marius Reimer

Made with

  • JS

About a code

Horizontal Card Carousel in React Native

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

Dependencies: -

Author

  • Catalin Miron

Made with

  • HTML / CSS / JS

About a code

React Native Headphones Carousel

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

Responsive: yes

Dependencies: -

Author

  • @keyframers

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

3D Cover Flow in React!

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

Responsive: yes

Dependencies: -

Author

  • Alex Taietti

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

React Carousel

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

Responsive: yes

Dependencies: -

Author

  • YY Chang

Made with

  • HTML / CSS / JS

About a code

React Grid Carousel

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

Dependencies: -

Demo image: React Alice Carousel

Author

  • maxmarinich

About a code

React Alice Carousel

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

Author

  • librarylai

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

React Carousel Version 2

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Ioannis Maliaras

Made with

  • HTML / CSS / JS

About a code

React Material UI Carousel

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

Author

  • Ryan Mulligan

Made with

  • HTML (Pug) / CSS (SCSS) / JS (Babel)

About a code

React Slider With Hover Effect

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

Responsive: no

Dependencies: react-transition-group.js

Author

  • Ryan Santos

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

React Carousel Slides

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

Responsive: yes

Dependencies: -

Author

  • Le Hoang Nam

Made with

  • HTML / CSS / JS

About a code

React Native Anchor Carousel

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

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

Responsive: yes

Dependencies: -

Demo image: React Native Looped Carousel

Author

  • Phil Rukin

About a code

React Native Looped Carousel

Looped carousel for React Native.

Demo image: React Carousel

Author

  • Brainhub

About a code

React Carousel

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.

Author

  • NAVER

About a code

Flicking

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

Demo image: Pure React Carousel

Author

  • Express Labs

About a code

Pure React Carousel

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.

Author

  • Fernando Gomes

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

React Carousel

React carousel - custom version.

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

Responsive: yes

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

Author

  • Andy Pag├Ęs

Made with

  • HTML / CSS (SCSS) / JS (Babel)

About a code

Carousel (React)

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

Responsive: no

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

Demo image: React Native Snap Carousel

Author

  • Archriss

About a code

React Native Snap Carousel

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.

Demo image: React Native Carousel Control

Author

  • Gustavo Machado

About a code

React Native Carousel Control

React Native Carousel control with support for iOS and Android.

Author

  • Travis Arnold

About a code

React View Pager

Slider/Carousel powered by React Motion.