|
13 | 13 |
|
14 | 14 | ## The best carousel component in React Native community. ⚡️ |
15 | 15 |
|
16 | | -- **It completely solved this** [problem](https://github.com/meliorence/react-native-snap-carousel/issues/632) **for `react-native-snap-carousel`** |
17 | | -- **Fully implemented using Reanimated 3** |
18 | | -- **[Examples](https://app.rn-carousel.dev)** |
19 | | - |
20 | | -## Getting Started |
21 | | - |
22 | | -Check out the [documentation](https://rn-carousel.dev) website. |
23 | | - |
24 | | -## Examples |
25 | | - |
26 | | -> Click on the image to see the code snippets [[Try it]](https://snack.expo.dev/@caspian.zhao/react-native-reanimated-carousel) 🍺 |
27 | | -
|
28 | | -| <img src="assets/normal-horizontal.gif"/> | <img src="assets/normal-vertical.gif"/> | <img src="assets/parallax-horizontal.gif"/> | |
29 | | -| :------------------------------------------------------------------: | :-------------------------------------------------------------------: | :--------------------------------------------------------------------: | |
30 | | -| <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> | |
31 | | -| <img src="assets/parallax-vertical.gif"/> | <img src="assets/stack-horizontal-left.gif"/> | <img src="assets/stack-horizontal-right.gif"/> | |
32 | | -| <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> | |
33 | | -| <img src="assets/stack-vertical-left.gif"/> | <img src="assets/stack-vertical-right.gif"/> | <img src="assets/stack-horizontal-right.gif"/> | |
34 | | -| <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> | |
35 | | -| <img src="assets/left-align.gif"/> | | <img src="assets/right-align.gif" > | |
36 | | -| <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> | |
37 | | - |
38 | | -> You can make cool animations with custom animation API [[Details]](https://rn-carousel.dev/custom-animations) |
39 | | -
|
40 | | -| <img src="assets/advanced-parallax.gif"/> | <img src="assets/pause-advanced-parallax.gif"/> | <img src="assets/scale-fade-in-out.gif"/> | |
41 | | -| :-----------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------: | |
42 | | -| <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> | |
43 | | -| <img src="assets/rotate-scale-fade-in-out.gif"/> | <img src="assets/rotate-in-out.gif"/> | <img src="assets/anim-tab-bar.gif"/> | |
44 | | -| <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> | |
45 | | -| <img src="assets/marquee.gif"/> | <img src="assets/multiple.gif"/> | <img src="assets/circular.gif"/> | |
46 | | -| <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> | |
47 | | -| <img src="assets/fold.gif"/> | <img src="assets/tear.gif"/> | <img src="assets/press-swipe.gif"/> | |
48 | | -| <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> | |
49 | | -| <img src="assets/cube-3d.gif"/> | <img src="assets/blur-parallax.gif"/> | <img src="assets/curve.gif"/> | |
50 | | -| <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> | |
51 | | -| <img src="assets/parallax-layers.gif"/> | <img src="assets/stack-cards.gif"/> | <img src="assets/flow.gif"/> | |
52 | | -| <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> | |
53 | | -| <img src="assets/blur-rotate.gif"/> | || |
54 | | -| <a href="./example/app/src/pages/blur-rotate/index.tsx">blur-rotate</a> | | | |
55 | | - |
| 16 | +- [Getting Started](https://rn-carousel.dev) |
| 17 | +- [Examples](https://rn-carousel.dev/Examples/summary) |
56 | 18 |
|
57 | 19 | ## Sponsors |
58 | 20 |
|
|
0 commit comments