sns-react-elastic-carousel
Note: This is a forked repo from https://github.com/sag1v/react-elastic-carousel. So, all usage are similar to that.
Here are the list of updates I made:
- Removing default margin to SliderContainer
- Updating to new way of attrs in styled-components
- Removing Dots onclick fn
- Updating Dots style
TODOs
- Infinite looping
- Control items visible on scroll when more than one items are visible on the screen at a time.
Apart from these, rest all feature remain the same. Use below npm package to use this.
Install
npm install --save sns-react-elastic-carousel
Most of the documentation and demo below is from parent repo.
sag1v
Credit toA 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 awidth: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 Demos & Docs
Usage
import React Component from 'react';import Carousel from 'sns-react-elastic-carousel'; 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' { const items = thisstate; return <Carousel> items </Carousel> }
Playground
Development
git clone https://github.com/sanishkr/sns-react-elastic-carousel.gitcd sns-react-elastic-carouselyarnyarn docz:dev
The application is running at http://localhost:8888
License
MIT ©