0.0.8 • Published 5 years ago
react-native-image-carousel-ks v0.0.8
React-Native Image Carousel KS
Componente React-Native para renderização de carousel de imagens de forma simples
Install
step 1
$ npm i react-native-image-carousel-ks
step 2
$ react-native link react-native-vector-icons
Read the official documentation
Example
import React, { Component } from "react";
import Slide from "react-native-image-carousel-ks";
export default class Example extends Component {
render() {
return (
<View slide={{ flex: 1 }}>
<Slide
img={[
"https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1274260/pexels-photo-1274260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1487009/pexels-photo-1487009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
]}
/>
</View>
);
}
}
Result
Example with arrow
...
<Slide
arrow={true}
img={[
"https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1274260/pexels-photo-1274260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
"https://images.pexels.com/photos/1487009/pexels-photo-1487009.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
]}
/>
...
Result
Props
Property | Type | isRequired? | Default |
---|---|---|---|
img | bool | required | - |
indicatorColor | string | optional | #FFFFFF |
indicatorSelectedColor | string | optional | #5C6270 |
arrow | bool | optional | false |
showIndicator | bool | optional | true |
circleIndicator | bool | optional | true |