https://github.com/jpapillon/react-native-carousel-pager

React Native carousel pager.
https://github.com/jpapillon/react-native-carousel-pager

carousel pager react-native

Last synced: over 1 year ago
JSON representation

React Native carousel pager.

• Host: GitHub
• URL: https://github.com/jpapillon/react-native-carousel-pager
• Owner: jpapillon
• License: mit
• Created: 2017-08-08T14:53:29.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2021-02-22T06:07:34.000Z (over 5 years ago)
• Last Synced: 2025-02-27T05:49:29.427Z (over 1 year ago)
• Topics: carousel, pager, react-native
• Language: JavaScript
• Homepage:
• Size: 93.2 MB
• Stars: 90
• Watchers: 4
• Forks: 22
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-native-carousel-pager

[![Version](https://img.shields.io/npm/v/react-native-carousel-pager.svg)](https://www.npmjs.com/package/react-native-carousel-pager)

[![npm](https://img.shields.io/npm/dm/react-native-carousel-pager.svg)](https://www.npmjs.com/package/react-native-carousel-pager)

[![license](https://img.shields.io/github/license/mashape/apistatus.svg)]()



    



## Installation

```bash

npm install react-native-carousel-pager --save

```

or

```bash

yarn add react-native-carousel-pager

```

## Usage

```js

import {View} from 'react-native';

import React, {Component} from 'react';

import CarouselPager from 'react-native-carousel-pager';

export default class Pager extends Component {

  onClickSomething() {

    this.carousel.goToPage(2);

  }

  render() {

    return (

      

         this.carousel = ref} initialPage={2} pageStyle={{backgroundColor: '#fff'}}>

          

          

          

          

        

      

    );

  }

}

```

## Properties

Name | propType | default value | description

--- | --- | --- | ---

initialPage | number | 0 | Initial page to display on render

vertical | boolean | false | Set to `true` if carousel should be vertical

blurredZoom | number | 0.8 | Zoom (number between 0 and 1) to apply to blurred pages

blurredOpacity | number | 0.8 | Opacity (number between 0 and 1) to apply to blurred pages

animationDuration | number | 150 | Animation duration between page changes

containerPadding | number | 30 | Container padding (used to display part of preceding and following pages)

pageSpacing | number | 10 | Space between pages

pageStyle | object | null | Style to apply to each page

onPageChange | function | (page) => {} | When current page changes, call onPageChange with parameter

## Methods

Name | propType | description

--- | --- | ---

goToPage | number | Scrolls to the given page