All Projects → Voyzz → react-native-animated-carousel

Voyzz / react-native-animated-carousel

Licence: MIT License
🦄 A wonderful animated carsouel hooks component for React-Native

Programming Languages

javascript
184084 projects - #8 most used programming language

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

react-native-image-page
react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android
Stars: ✭ 19 (+18.75%)
Mutual labels:  carousel
ui
JavaScript UI component library, includes the latest Fancybox
Stars: ✭ 222 (+1287.5%)
Mutual labels:  carousel
react-gallery-carousel
Mobile-friendly gallery carousel 🎠 with server side rendering, lazy loading, fullscreen, thumbnails, touch, mouse emulation, RTL, keyboard navigation and customisations.
Stars: ✭ 178 (+1012.5%)
Mutual labels:  carousel
react-carousel-minimal
React.js Responsive Minimal Carousel
Stars: ✭ 76 (+375%)
Mutual labels:  carousel
react-native-multiple-select
Customizable & Animated, Easy to Use Multiple Select Library for React Native
Stars: ✭ 31 (+93.75%)
Mutual labels:  animated
shopify-product-image-slider
Implementation of the Slick image carousel into a Shopify store
Stars: ✭ 21 (+31.25%)
Mutual labels:  carousel
ngx-glide
Angular wrapper component of Glide carousel library
Stars: ✭ 22 (+37.5%)
Mutual labels:  carousel
hugo-travelify-theme
Port of Aigars Silkalns's Wordpress theme Travelify to Hugo. Demo -
Stars: ✭ 34 (+112.5%)
Mutual labels:  carousel
vanilla-js-carousel
Tiny (1Kb gzipped) JavaScript carousel with all the features most of us will ever need.
Stars: ✭ 87 (+443.75%)
Mutual labels:  carousel
vue-typical
🐡 Vue Animated typing in ~400 bytes of JavaScript
Stars: ✭ 121 (+656.25%)
Mutual labels:  animated
InfiniteCarousel
💈Infinite Carousel Collection View
Stars: ✭ 67 (+318.75%)
Mutual labels:  carousel
react-flickity-component
A React.js component for using @desandro's Flickity
Stars: ✭ 258 (+1512.5%)
Mutual labels:  carousel
maslo-persona
Meet Maslo... an expressive empathetic avatar to add a personified computing layer to a project!
Stars: ✭ 20 (+25%)
Mutual labels:  animated
scroll-snap-carousel
One more carousel plugin, but using CSS Scroll Snap and for every frameworks!
Stars: ✭ 46 (+187.5%)
Mutual labels:  carousel
nglp-angular-material-landing-page
NGLP is an Angular Material Landing Page.
Stars: ✭ 32 (+100%)
Mutual labels:  carousel
Bibata Cursor Rainbow
'Semi-Animated' Bibata cursors with rainbow colors
Stars: ✭ 18 (+12.5%)
Mutual labels:  animated
ACarousel
A carousel view for SwiftUI | SwiftUI 旋转木马效果
Stars: ✭ 124 (+675%)
Mutual labels:  carousel
react-native-imaged-carousel-card
Fully customizable & Lovely Imaged Carousel Card for React Native
Stars: ✭ 70 (+337.5%)
Mutual labels:  carousel
haraka
Stateful animations in React Native.
Stars: ✭ 71 (+343.75%)
Mutual labels:  animated
animwall
Animated wallpapers for Linux
Stars: ✭ 28 (+75%)
Mutual labels:  animated




Hello, folks!

🦄 This is a wonderful animated carsouel hooks component for React-Native

为React Native开发的轮播展示动画组件

👨🏻‍💻 Powered by Voyz Shen

🏫 Shanghai Jiao Tong University, Ctrip

Catalog


Demo


How to use

  • install
npm i react-native-animated-carousel --save
  • import
import AnimatedCarousel from 'react-native-animated-carousel'
  • Demo
const testData = [
  {
    title:'tilte1',
    subTitle:'副标题1',
    bgImage:'https://i.loli.net/2020/09/17/qxoJu8G3fe97lrc.png',
    jumpUrl:''
  },
  ...
  {
    title:'title2',
    subTitle:'副标题12',
    bgImage:'https://i.loli.net/2020/09/17/rgiPpKRafObAQvN.png',
    jumpUrl:''
  }
]

...

<AnimatedCarousel cardList={testData} ></AnimatedCarousel>


Properties

Prop Default Options Type Description
cardList / / Array data of cards
卡片数据

item properties ↓

Prop Default Options Type Description
title / / String title of card
subTitle / / String subtitle of card
bgImage / / String background image of card
jumpUrl / / String jump URL of card

Versions

  • v1.0.1 添加配置参数

  • v1.0.0 发布组件

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].