a cross-platform (
iOS,Android,Web) react native carousel component
react-native-carousel-banner is a React Native component for building a cross-platform carousel.
Highlighted Features:
- Cross Platform - uniform behaviors among
iOS,AndroidandWeb - Loop Cycle - support head-to-tail / tail-to-head loop cycle
- Auto Play - auto play with smooth transition
yarn add react-native-carousel-bannera minimally-configured carousel
import Carousel from 'react-native-carousel-banner';
const DATA = [
'/images/0.jpg',
'/images/1.jpg',
'/images/2.jpg',
];
<Carousel data={DATA} roundedSize={5} />| Prop | Type | Default | Description |
|---|---|---|---|
data |
string[] | [] |
the item data |
height |
number | 170 |
height of image |
roundedSize |
number | 0 |
borderRadius of image |
autoplay |
boolean | true |
determine whether the auto play mode is enabled or not |
autoplayInterval |
number | 5000 |
delay between item transitions in milliseconds |
dotColor |
string | #f97316 |
index dot backgroundColor |
onChange |
function | null | callback of index changed |
| Prop | Type | Default | Description |
|---|---|---|---|
currentIndex |
number | 0 |
the current page number |
total |
number | 0 |
the total number of pages |
MIT