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>
70 lines
1.4 KiB
TypeScript
70 lines
1.4 KiB
TypeScript
import Carousel from 'react-multi-carousel'
|
|
import { ResponsiveType } from 'react-multi-carousel/lib/types'
|
|
import 'react-multi-carousel/lib/styles.css'
|
|
import Image from 'next/image'
|
|
|
|
const BreakpointSlides: ResponsiveType = {
|
|
desktop: {
|
|
breakpoint: { max: 3000, min: 1024 },
|
|
items: 3,
|
|
},
|
|
tablet: {
|
|
breakpoint: { max: 1024, min: 530 },
|
|
items: 2,
|
|
},
|
|
mobile: {
|
|
breakpoint: { max: 530, min: 0 },
|
|
items: 1,
|
|
},
|
|
}
|
|
|
|
export default function Page() {
|
|
return (
|
|
<Carousel
|
|
responsive={BreakpointSlides}
|
|
ssr
|
|
infinite
|
|
itemClass="carousel-item"
|
|
autoPlay
|
|
>
|
|
<Image
|
|
alt="Gundam"
|
|
src="/brucetang.jpg"
|
|
priority
|
|
layout="responsive"
|
|
width={700}
|
|
height={475}
|
|
/>
|
|
<Image
|
|
alt="Musgo"
|
|
src="/cameronsmith.jpg"
|
|
priority
|
|
layout="responsive"
|
|
width={700}
|
|
height={475}
|
|
/>
|
|
<Image
|
|
alt="Valley"
|
|
src="/ganapathykumar.jpg"
|
|
priority
|
|
layout="responsive"
|
|
width={700}
|
|
height={475}
|
|
/>
|
|
<Image
|
|
alt="Beach"
|
|
src="/roanlavery.jpg"
|
|
layout="responsive"
|
|
width={700}
|
|
height={475}
|
|
/>
|
|
<Image
|
|
alt="Torii"
|
|
src="/tianshuliu.jpg"
|
|
layout="responsive"
|
|
width={700}
|
|
height={475}
|
|
/>
|
|
</Carousel>
|
|
)
|
|
}
|