carousel

A flexible and responsive carousel component for react

Apr 16, 2020
A flexible and responsive carousel component for react

react-elastic-carousel

A flexible and responsive carousel component for react.

View Demo View Github

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.

Install

npm install --save react-elastic-carousel

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 ( <Carousel> {items.map(item => <div key={item.id}>{item.title}</div>)} </Carousel> ) } }

Playground

Edit react-elastic-carousel

Development

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

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

GitHub

Recommended