0.0.8 • Published 5 years ago

react-native-image-carousel-ks v0.0.8

Weekly downloads
1
License
ISC
Repository
github
Last release
5 years ago

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

alt text

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

alt text

Props

PropertyTypeisRequired?Default
imgboolrequired-
indicatorColorstringoptional#FFFFFF
indicatorSelectedColorstringoptional#5C6270
arrowbooloptionalfalse
showIndicatorbooloptionaltrue
circleIndicatorbooloptionaltrue