3815222238
Fixes one of the items that was mentioned in #25854. It fixes warning from React in `with-react-multi-carousel`.
70 lines
2.8 KiB
JavaScript
70 lines
2.8 KiB
JavaScript
import { Component } from 'react'
|
|
import { withStyles } from '@material-ui/core/styles'
|
|
import Carousel from 'react-multi-carousel'
|
|
|
|
import Image from '../components/image'
|
|
|
|
const styles = (theme) => ({
|
|
root: {
|
|
textAlign: 'center',
|
|
},
|
|
title: {
|
|
maxWidth: 400,
|
|
margin: 'auto',
|
|
marginTop: 10,
|
|
},
|
|
})
|
|
|
|
class Index extends Component {
|
|
render() {
|
|
const { classes } = this.props
|
|
const images = [
|
|
'https://images.unsplash.com/photo-1549989476-69a92fa57c36?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1549396535-c11d5c55b9df?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550133730-695473e544be?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550167164-1b67c2be3973?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550338861-b7cfeaf8ffd8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550223640-23097fc71cb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550353175-a3611868086b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550330039-a54e15ed9d33?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1549737328-8b9f3252b927?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1549833284-6a7df91c1f65?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1549985908-597a09ef0a7c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
'https://images.unsplash.com/photo-1550064824-8f993041ffd3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60',
|
|
]
|
|
const responsive = {
|
|
desktop: {
|
|
breakpoint: { max: 3000, min: 1024 },
|
|
items: 3,
|
|
},
|
|
tablet: {
|
|
breakpoint: { max: 1024, min: 464 },
|
|
items: 2,
|
|
},
|
|
mobile: {
|
|
breakpoint: { max: 464, min: 0 },
|
|
items: 1,
|
|
},
|
|
}
|
|
return (
|
|
<div className={classes.root}>
|
|
<Carousel
|
|
responsive={responsive}
|
|
ssr
|
|
showDots={false}
|
|
slidesToSlide={1}
|
|
infinite
|
|
containerClass="container-with-dots"
|
|
itemClass="image-item"
|
|
deviceType={''}
|
|
>
|
|
{images.map((image) => {
|
|
return <Image key={image} url={image} alt={image} />
|
|
})}
|
|
</Carousel>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default withStyles(styles)(Index)
|