react-native-carousel-swiper
A refactored carousel from react-native-swiper < https://github.com/leecade/react-native-swiper >
Last updated 9 months ago by rip3rs .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-native-carousel-swiper 
SYNC missed versions from official npm registry.

react-native-carousel

Yet another carousel... This allows for video and any type of component within the carousel.

This is meant for really low performance ANDROID tablets.

NOTE

Currently this module does not support IOS, as I only really needed it for android. I will fix this though.

Install

npm i --save react-native-carousel-swiper

or

yarn add react-native-carousel-swiper

Usage

import React, { Component } from "react";
import { View, Text, Image } from "react-native";
import Carousel from 'react-native-carousel';

export default class App extends Component {

  ...

  render() {
    return (
      <Carousel loop?={true | false} arrows?={true | false} bullets?={true | false}  loopTimer?={ number } >
        <Text>'Hello World!'</Text>
        <View><Text>'Hello World! 2'</Text></View>
        <Image source={{ uri: `<some Path>`, scale: 1 }} />
      </Carousel>
    );
  }
}

You may pass individual component attributes to the carousel. An example usecase is so to make an auto slider slide on a specific time for each component, like imagine an image is meant to slide for 10 seconds whilst the other image for 25 seconds.

To do this there MUST be a object that is passed (these are the MAIN attr that reads):

Attributes type Description
isVideo bool If it is a Video (**)
runningtime number Time running each component (in seconds)

** Video you will have to have either NPM: React Native Video or something else in your custom component. What this is doing is creating a empty black <View> so that ONLY when the video in being seen it loads. this is to make sure that we don't kill the tablet.

NOTE

For video you MUST add the attr isVideo.

example:

  let slideComponentsWAttr = [
    {attr: { isVideo: true, runningTime: 120 }, component: <CustomComponent /> }
    {attr: { runningTime: 25 }, component: <View /> }
    {component: <Text /> }
  ];

Example:

import React, { Component } from "react";
import { View, Text, Image } from "react-native";
import Carousel from 'react-native-carousel';
import CustomComponent from './customComponent/customComponent';

export default class App extends Component {

  ...

  let pages = [
    {attr: { isVideo: true, runningTime: 120 }, component: <CustomComponent /> }
    {attr: { runningTime: 25 }, component: <View /> }
    {component: <Text /> }
  ];

  render() {
    return (
      <Carousel loop?={true | false} arrows?={true | false} bullets?={true | false}  loopTimer?={ number } >
        {pages}
      </Carousel>
    );
  }
}

Props

Props type Default Description
loop bool true Auto loop
swipe bool true Switch swipe on off
arrows bool true Show Arrows
bullets bool true Show Bullets (pagination)
loopTimer number 5 Time for auto loop

Todo

  • Add IOS compatibility
  • Add custom styling into props
  • If on loop fade out Arrows, once touched show back arrows
  • TESTS. . . .

Contribute

There is a lot of things I still havent done due to time, more help would be really nice. If so please keep in mind that I would love to keep small components.

Current Tags

  • 1.0.11                                ...           latest (9 months ago)

13 Versions

  • 1.0.11                                ...           9 months ago
  • 1.1.0                                ...           2 years ago
  • 1.0.10                                ...           2 years ago
  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 13
Dependencies (3)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |