react-native-image-slider-carousel
Version:
React Native Image Slider and Carousel
100 lines (89 loc) • 4.08 kB
Markdown
This is a custom image slider and carousel.
Please reload the application to make it work more correctly when you make a change for this component.
My build versions:
1- react-native-reanimated: 2.14.4
## Installation
```bash
npm install react-native-image-slider-carousel
```
## Doc
[react-native-reanimated](https://docs.swmansion.com/react-native-reanimated/)
## Usage
```js
import ImageCarousel from "react-native-image-slider-carousel";
const imageData = [
{
image: {
uri: "https://cdn.tommylife.com.tr/p-siyah-beyaz-bagcikli-yuksek-taban-suni-deri-erkek-spor-ayakkabi-89111-spor-ayakkabi-tommylife-t11er-89111-173162-32-O.jpg",
},
text: "Item 1",
},
{
image: {
uri: "https://st-vans.mncdn.com/mnresize/1500/1500/Content/media/ProductImg/original/637639363468969344.jpg",
},
text: "Item 2",
},
{
image: {
uri: "https://cdn.cimri.io/image/1000x1000/pumasmashvbuckerkeksporayakkabgri_208856385.jpg",
},
text: "Item 3",
},
{
image: require("your local image path"),
text: "Item 4",
},
];
<ImageCarousel
data={imageData}
square={false}
autoChange={true}
changeDuration={4000}
loop={true}
fullWidth={false}
showIndex={false}
showDots={true}
bgColorContainer={"white"}
imageBorderRadius={20}
imageBorderWidth={0}
imageBorderColor={"black"}
indexContainMarginTop={0}
dotContainMarginTop={0}
dotColor={"#0081A6"}
dotWidth={10}
dotHeight={5}
dotBorderRadius={10}
onChange={(item, index) => {
console.log("******");
console.log("onChange : " + index);
console.log("onChange : " + item.text);
}}
onPress={(item, index) => {
console.log("******");
console.log("onPress : " + index);
console.log("onPress : " + item.text);
}}
/>;
```
## API
| prop | type | description | default |
| :---------------------- | :-------- | :------------------------------- | :------------- |
| `data` | `List` | Image Data. | "notFound.png" |
| `square` | `Boolean` | Image square. | false |
| `autoChange` | `Boolean` | Image auto change. | true |
| `changeDuration` | `Number` | Image auto change duration. | 4000 |
| `loop` | `Boolean` | Image loop. | true |
| `fullWidth` | `Boolean` | Image fullWidth. | false |
| `showIndex` | `Boolean` | Image index. | false |
| `showDots` | `Boolean` | Image dots. | true |
| `bgColorContainer` | `String` | Image container backgroundColor. | "white" |
| `imageBorderRadius` | `Number` | Image borderRadius. | 20 |
| `imageBorderWidth` | `Number` | Image borderWidth. | 0 |
| `imageBorderColor` | `String` | Image borderColor. | "black" |
| `indexContainMarginTop` | `Number` | Image index marginTop. | 0 |
| `dotContainMarginTop` | `Number` | Image dots marginTop. | 0 |
| `dotColor` | `String` | Image dots color. | "#0081A6" |
| `dotWidth` | `Number` | Image dots width. | 10 |
| `dotHeight` | `Number` | Image dots height. | 5 |
| `dotBorderRadius` | `Number` | Image dots borderRadius. | 10 |