React Native FadingSlides Component
Simple looped fading slides carousel for React Native.
Installation
npm install --save react-native-fading-slidesProperties
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
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 (
<View>
<FadingSlides
slides={slides}
fadeDuration={1200}
stillDuration={2000}
height={500}
startAnimation={true}
/>
</View>
);
};