react-zerok-carousel
v0.12.2
Published
A flexible and responsive carousel component for react
Downloads
26
Maintainers
Readme
react-zerok-carousel
The react-zerok-carousel
is a clone of react-elastic-carousel
. The development of this clone was necessary to implement some adjustments in typing.
A flexible and responsive carousel component for react
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 a1200px
screen, most carousel component will "think" we are on a1200px
mode because they "watch" the view-port's size and not the wrapping element's size. This is the reason whyreact-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 react-elastic-carousel Demos & Docs
Install
npm install --save react-zerok-carousel
or
yarn add react-zerok-carousel
Note
react-zerok-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-zerok-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
Development
git clone https://github.com/zeroskullx/react-zerok-carousel.git
cd react-zerok-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
UPDATE zeroksullx