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 |