Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@dohooo
dohooo authored Feb 10, 2025
1 parent 459c013 commit 88b041a
Showing 1 changed file with 2 additions and 40 deletions.
42 changes: 2 additions & 40 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,46 +13,8 @@

## The best carousel component in React Native community. ⚡️

- **It completely solved this** [problem](https://github.com/meliorence/react-native-snap-carousel/issues/632) **for `react-native-snap-carousel`**
- **Fully implemented using Reanimated 3**
- **[Examples](https://app.rn-carousel.dev)**

## Getting Started

Check out the [documentation](https://rn-carousel.dev) website.

## Examples

> Click on the image to see the code snippets [[Try it]](https://snack.expo.dev/@caspian.zhao/react-native-reanimated-carousel) 🍺
| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> |
| :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: |
| <a href="./example/app/src/pages/normal/index.tsx">normal-horizontal</a> | <a href="./example/app/src/pages/normal/index.tsx">normal-vertical</a> | <a href="./example/app/src/pages/parallax/index.tsx">parallax-horizontal</a> |
| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./example/app/src/pages/parallax/index.tsx">parallax-vertical</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-left</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> |
| <a href="./example/app/src/pages/stack/index.tsx">stack-vertical-left</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-vertical-right</a> | <a href="./example/app/src/pages/stack/index.tsx">stack-horizontal-right</a> |
| <img src="assets/left-align.gif"/> | | <img src="assets/right-align.gif" > |
| <a href="./example/app/src/pages/left-align/index.tsx">left-align</a> | | <a href="./example/app/src/pages/right-align/index.tsx">right-align</a> |

> You can make cool animations with custom animation API [[Details]](https://rn-carousel.dev/custom-animations)
| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> |
| :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: |
| <a href="./example/app/src/pages/advanced-parallax/index.tsx">advanced-parallax</a> | <a href="./example/app/src/pages/pause-advanced-parallax/index.tsx">pause-advanced-parallax</a> | <a href="./example/app/src/pages/scale-fade-in-out/index.tsx">scale-fade-in-out</a> |
| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> |
| <a href="./example/app/src/pages/rotate-scale-fade-in-out/index.tsx">rotate-scale-fade-in-out</a> | <a href="./example/app/src/pages/rotate-in-out/index.tsx">rotate-in-out</a> | <a href="./example/app/src/pages/anim-tab-bar/index.tsx">anim-tab-bar</a> |
| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> |
| <a href="./example/app/src/pages/marquee/index.tsx">marquee</a> | <a href="./example/app/src/pages/multiple/index.tsx">multiple</a> | <a href="./example/app/src/pages/circular/index.tsx">circular</a> |
| <img src="assets/fold.gif"/> | <img src="assets/tear.gif"/> | <img src="assets/press-swipe.gif"/> |
| <a href="./example/app/src/pages/fold/index.tsx">fold</a> | <a href="./example/app/src/pages/tear/index.tsx">tear</a> | <a href="./example/app/src/pages/press-swipe/index.tsx">press-swipe</a> |
| <img src="assets/cube-3d.gif"/> | <img src="assets/blur-parallax.gif"/> | <img src="assets/curve.gif"/> |
| <a href="./example/app/src/pages/cube-3d/index.tsx">cube-3d</a> | <a href="./example/app/src/pages/blur-parallax/index.tsx">blur-parallax</a> | <a href="./example/app/src/pages/curve/index.tsx">curve</a> |
| <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> |
| <a href="./example/app/src/pages/parallax-layers/index.tsx">parallax-layers</a> | <a href="./example/app/src/pages/stack-cards/index.tsx">stack-cards</a> | <a href="./example/app/src/pages/flow/index.tsx">flow</a> |
| <img src="assets/blur-rotate.gif"/> | ||
| <a href="./example/app/src/pages/blur-rotate/index.tsx">blur-rotate</a> | | |

- [Getting Started](https://rn-carousel.dev)
- [Examples](https://rn-carousel.dev/Examples/summary)

## Sponsors

Expand Down

0 comments on commit 88b041a

Please sign in to comment.