Need help with react-elastic-carousel?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sag1v
234 Stars 81 Forks MIT License 330 Commits 10 Opened issues

Description

A flexible and responsive carousel component for react https://sag1v.github.io/react-elastic-carousel

Services available

!
?

Need anything else?

Contributors list

# 70,095
TypeScr...
HTML
React
Redux
86 commits
# 20,891
PHP
TypeScr...
React
reactjs
2 commits
# 821
GitHub
rust-la...
wechat-...
query-l...
2 commits

react-elastic-carousel

A flexible and responsive carousel component for react

NPM npm npm bundle size

Why do we need yet another carousel component

  • Element resize support (true responsiveness)
    Most of the carousel components are responsive to the viewport size, but this is not a real responsive support as we can have an element with a

    width:500px
    on a
    1200px
    screen, most carousel component will "think" we are on a
    1200px
    mode because they "watch" the view-port's size and not the wrapping element's size. This is the reason why
    react-eleastic-carousel
    is using the resize-observer which gives us a true responsive support, not matter on what screen size we are.
  • RTL (right-to-left) support
    Supporting right-to-left languages requires a full support for right-to-left rendering and animations which is not supported in most of the carousel components out there. also, right-to-left support is important and should be a standard for most applications.

Live Demos & Docs

Install

npm install --save react-elastic-carousel

or

yarn add react-elastic-carousel

Note

react-elastic-carousel
is using styled-components for styling, this means that you should install it as well:
npm install --save styled-components

Usage

import React, { Component } from 'react';
import Carousel from 'react-elastic-carousel';

class App extends Component { state = { items: [ {id: 1, title: 'item #1'}, {id: 2, title: 'item #2'}, {id: 3, title: 'item #3'}, {id: 4, title: 'item #4'}, {id: 5, title: 'item #5'} ] }

render () { const { items } = this.state; return ( {items.map(item =>

{item.title}
)} ) } }

Playground

Edit react-elastic-carousel

Development

git clone https://github.com/sag1v/react-elastic-carousel.git
cd react-elastic-carousel
yarn

To run the docs site run

yarn start

to run a demo Application run

yarn demo

The application is running at http://localhost:8888

License

MIT © sag1v

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.