https://github.com/paulbgd/react-native-image-slider
A quick and easy image slider for react native. Maintainer wanted!
https://github.com/paulbgd/react-native-image-slider
hacktoberfest
Last synced: about 1 year ago
JSON representation
A quick and easy image slider for react native. Maintainer wanted!
- Host: GitHub
- URL: https://github.com/paulbgd/react-native-image-slider
- Owner: PaulBGD
- License: mit
- Created: 2016-02-25T03:38:53.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2023-09-12T04:54:05.000Z (almost 3 years ago)
- Last Synced: 2025-04-13T05:05:13.597Z (about 1 year ago)
- Topics: hacktoberfest
- Language: JavaScript
- Homepage:
- Size: 17.6 MB
- Stars: 237
- Watchers: 5
- Forks: 103
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-image-slider
A quick and easy image slider for react native.
## Installation
```bash
npm install react-native-image-slider --save
```
or
```bash
yarn add react-native-image-slider
```
## Usage
```javascript
import ImageSlider from 'react-native-image-slider';
// ...
render() {
return ()
}
```
### Autoplay / Custom buttons / Custom slide / Loop
```javascript
class Example extends Component<{}> {
render() {
const images = [
'https://placeimg.com/640/640/nature',
'https://placeimg.com/640/640/people',
'https://placeimg.com/640/640/animals',
'https://placeimg.com/640/640/beer',
];
return (
Content 1
(
// It's important to put style here because it's got offset inside
)}
customButtons={(position, move) => (
{images.map((image, index) => {
return (
move(index)}
style={styles.button}
>
{index + 1}
);
})}
)}
/>
Content 2
);
}
}
```
## Props
### `images`
rendered images
### `customButtons`
function returns custom pagination buttons component, it's got position index and move to position function as arguments
### `customSlide`
function returns Node with arguments `index` - images list index, `item` - anything you pass inside images prop, `style` - for top component of your custom slide, `width` - calculated slide width
### `autoPlayWithInterval`
activates autoplay when passed (it uses milliseconds)
### `loop`
[BUGGY ON ANDROID] loops scroll of images, but in one direction only
### `loopBothSides`
[IOS ONLY] same as loop, but does it in any direction
### `onPositionChanged`
called when the current position is changed
### `position`
used for controlled components
### `onPress`
returns an object with image url and index of image pressed
### `style`
styles ScrollView inside ImageSlider, you may pass height here (100% by default)
## License
MIT