All Projects → jpapillon → react-native-carousel-pager

jpapillon / react-native-carousel-pager

Licence: MIT license
React Native carousel pager.

Programming Languages

javascript
184084 projects - #8 most used programming language
objective c
16641 projects - #2 most used programming language
python
139335 projects - #7 most used programming language
java
68154 projects - #9 most used programming language

Projects that are alternatives of or similar to react-native-carousel-pager

tiny-wheels
一套基于原生JavaScript开发的组件库,无依赖、体积小、简单易用
Stars: ✭ 60 (-33.33%)
Mutual labels:  carousel, pager
react-magic-slider-dots
React Magic Dots Component for React Slick Carousel (inspired by Instagram)
Stars: ✭ 21 (-76.67%)
Mutual labels:  carousel
Teaset
A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control.
Stars: ✭ 2,845 (+3061.11%)
Mutual labels:  carousel
yii2-gallery-widget
BlueImp Gallery Widget for Yii2
Stars: ✭ 60 (-33.33%)
Mutual labels:  carousel
autopagerize
Infiniscroll on web pages using a large database of rules. A fully reworked fork of the original extension.
Stars: ✭ 55 (-38.89%)
Mutual labels:  pager
GNCarousel
Carousel based on web design
Stars: ✭ 19 (-78.89%)
Mutual labels:  carousel
React Image Gallery
React carousel image gallery component with thumbnail support 🖼
Stars: ✭ 2,946 (+3173.33%)
Mutual labels:  carousel
infinite-carousel-flutter
Carousel in flutter. Supports infinite looping and gives control over anchor and velocity.
Stars: ✭ 24 (-73.33%)
Mutual labels:  carousel
flexbox-carousel
CSS3 Animated Carousel with Flexbox
Stars: ✭ 23 (-74.44%)
Mutual labels:  carousel
vue-product-carousel
Simple product carousel with hot image replacement, Zoom and Swipe mode
Stars: ✭ 37 (-58.89%)
Mutual labels:  carousel
react-instagram-zoom-slider
🌄↔️ A slider component with pinch to zoom capabilities inspired by Instagram
Stars: ✭ 67 (-25.56%)
Mutual labels:  carousel
RxPager
RxPager is an Android library that helps handling paginated results in a reactive way
Stars: ✭ 56 (-37.78%)
Mutual labels:  pager
Why-Not-Image-Carousel
Why Not use Image Carousel if you have lots of images to show!
Stars: ✭ 310 (+244.44%)
Mutual labels:  carousel
spotify-song-recommender
A Spotify song recommendation engine built with the power of graph analytics.
Stars: ✭ 34 (-62.22%)
Mutual labels:  pager
react-native-reanimated-carousel
🎠 React Native swiper/carousel component, fully implemented using reanimated v2, support to iOS/Android/Web. (Swiper/Carousel)
Stars: ✭ 1,461 (+1523.33%)
Mutual labels:  carousel
Pagerecyclerview
PageRecyclerView achieves page turning function and unlimited carousel
Stars: ✭ 241 (+167.78%)
Mutual labels:  carousel
MediaSliderView
Pure java based, highly customizable media slider gallery supporting both images and videos for android.
Stars: ✭ 85 (-5.56%)
Mutual labels:  carousel
ng2-carouselamos
Simple carousel/slider for angular 2.
Stars: ✭ 39 (-56.67%)
Mutual labels:  carousel
angular-simple-slider
An AngularJS directive providing a simple slider functionality
Stars: ✭ 15 (-83.33%)
Mutual labels:  carousel
vue3-carousel
Vue 3 carousel component
Stars: ✭ 379 (+321.11%)
Mutual labels:  carousel

react-native-carousel-pager

Version npm license

Installation

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

or

yarn add react-native-carousel-pager

Usage

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 (
      <View style={{flex: 1}}>
        <CarouselPager ref={ref => this.carousel = ref} initialPage={2} pageStyle={{backgroundColor: '#fff'}}>
          <View key={'page0'}></View>
          <View key={'page1'}></View>
          <View key={'page2'}></View>
          <View key={'page3'}></View>
        </CarouselPager>
      </View>
    );
  }
}

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
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].