Skip to content

sag1v/react-elastic-carousel

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
sagiv.bengiat
Mar 29, 2021
9769fcc · Mar 29, 2021
Aug 18, 2020
Dec 17, 2020
Mar 27, 2021
Sep 5, 2018
Sep 1, 2018
May 28, 2020
Mar 28, 2021
Mar 28, 2021
May 27, 2020
Sep 13, 2018
Sep 13, 2018
Dec 17, 2020
Oct 10, 2018
Dec 17, 2020
Jan 24, 2020
Sep 8, 2018
Sep 21, 2018
Mar 29, 2021
Dec 17, 2020
Aug 8, 2020
Dec 17, 2020

Repository files navigation

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.

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 (
      <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

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