react-native-next-carousel
v0.1.3
Published
Carousel with faded effect.
Downloads
10
Readme
react-native-next-carousel
Installation
npm install react-native-next-carousel
Or
yarn add react-native-next-carousel
Check example
Github example github
Usage
import Carousel from "react-native-next-carousel";
const imageUrls = [
{ title: 'First Slide', img: 'https://plus.unsplash.com/premium_photo-1664546293816-191e0566f19e?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' },
{ title: 'Second Slide', img: 'https://plus.unsplash.com/premium_photo-1683134105531-42032fc66937?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' },
{ title: 'Third Slide', img: 'https://plus.unsplash.com/premium_photo-1661596686441-611034b8077e?q=80&w=2874&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D' }
]
<Carousel
data={imageUrls}
rounded={30}
imageGap={20}
imageObj={'img'}
imageOffset={100}
paddingHorizontal={20}
/>
Props
| Property | Type | Default | Description |
| -------------------- | :-----: | :-----: | -------------------------------------------- |
| data | array | null
| set the image source or data object |
| height | number | 400 | set image height |
| imageGap | number | 20 | set image gap between |
| imageObj | number | null
| set if image is inside array object |
| imageOffset | number | 30 | set image border radius |
| paddingHorizontal | HexColor | 20 | set/override shadow background color |
| overlayContainer | component | null
| add text overlay on image |
Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
License
MIT