e0c3d28679
### Example - Moved to typescript - Making use of the Image API (old example only use image tag) ### Dependencies - updated deps to latest - removed unused deps, just to focus on the current example and not other ones ``` @material-ui/core, @material-ui/icons, jss, mobile-detect, react-jss ``` ### Deploy [Example deploy](https://rmcexample-86mr9qpaa-falsepopsky.vercel.app/) ## Documentation / Examples - [x] Make sure the linting passes by running `pnpm lint` - [x] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples) Co-authored-by: Balázs Orbán <info@balazsorban.com> |
||
---|---|---|
.. | ||
pages | ||
public | ||
.gitignore | ||
package.json | ||
README.md | ||
tsconfig.json |
react-multi-carousel example
react-multi-carousel is a React component that provides a Carousel that renders on the server-side that supports multiple items with no external dependency.
Deploy your own
Deploy the example using Vercel or preview live with StackBlitz
How to use
Execute create-next-app
with npm, Yarn, or pnpm to bootstrap the example:
npx create-next-app --example with-react-multi-carousel with-react-multi-carousel-app
yarn create next-app --example with-react-multi-carousel with-react-multi-carousel-app
pnpm create next-app --example with-react-multi-carousel with-react-multi-carousel-app
Deploy it to the cloud with Vercel (Documentation).
How does it work with ssr?
- On the server-side, we detect the user's device to decide how many items we are showing and then using flex-basis to assign * width to the carousel item.
- On the client-side, old fashion getting width of the container and assign the average of it to each carousel item.