https://github.com/chagasaway/react-native-fading-slides

:curly_loop: Simple looped fading slides carousel for React Native.
https://github.com/chagasaway/react-native-fading-slides

react react-component react-native

Last synced: 5 days ago
JSON representation

:curly_loop: Simple looped fading slides carousel for React Native.

• Host: GitHub
• URL: https://github.com/chagasaway/react-native-fading-slides
• Owner: chagasaway
• License: mit
• Created: 2015-10-11T04:08:12.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-12-11T02:52:25.000Z (about 7 years ago)
• Last Synced: 2024-11-30T06:09:32.400Z (12 days ago)
• Topics: react, react-component, react-native
• Language: JavaScript
• Homepage:
• Size: 294 KB
• Stars: 128
• Watchers: 3
• Forks: 16
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-native - react-native-fading-slides ★103 - Simple looped fading slides carousel for React Native (Components / UI)
• awesome-reactnative-ui - react-native-fading-slides
• awesome-react-native - react-native-fading-slides ★103 - Simple looped fading slides carousel for React Native (Components / UI)
• awesome-react-native - react-native-fading-slides ★103 - Simple looped fading slides carousel for React Native (Components / UI)
• awesome-reactnative-ui - react-native-fading-slides
• awesome-react-native - react-native-fading-slides ★103 - Simple looped fading slides carousel for React Native (Components / UI)
• awesome-react-native-ui - react-native-fading-slides ★30 - Simple looped fading slides carousel for React Native (Components / UI)

README

        
## React Native FadingSlides Component

[![DeepScan Grade](https://deepscan.io/api/projects/1122/branches/2515/badge/grade.svg)](https://deepscan.io/dashboard/#view=project&pid=1122&bid=2515)

Simple looped fading slides carousel for React Native.

![alt tag](http://i.giphy.com/l41lR24WgEwYTaHzW.gif)

### Installation

```bash

npm install --save react-native-fading-slides

```

### Properties

```

fadeDuration={500} // Milliseconds for slide fade

stillDuration={1000} // Milliseconds for slide still

height={1000} // Set the slides component height

slides={slidesList} // Set the slides list

startAnimation={true} // Start or stops animation

```

### Slides Properties

```

title={"Title"} // Slide's title

titleColor={"#fff"} // Slide's title color

subtitle={"Subtitle"} // Slide's subtitle

subtitleColor={"#fff"} // Slide's subtitle color

image={require('image!filename')} // Slide's image

imageWidth={1000} // Slide's image width

imageHeight={1000} // Slide's image height

```

### Usage Example

```javascript

import FadingSlides from 'react-native-fading-slides';

const slides = [

  {

    image: require('image!squared-image'),

    imageWidth: 100,

    imageHeight: 100,

    title: 'Hello World',

    subtitle: 'This is a beautiful world',

    titleColor: '#fff',

    subtitleColor: '#fff',

  },

  {

    image: require('image!wide-image'),

    imageWidth: 200,

    imageHeight: 100,

    title: 'Bye World',

    subtitle: 'This is a see you soon',

    titleColor: '#fff',

    subtitleColor: '#fff',

  }

];

//...

render() {

  return (

    

      

    

  );

};

```