Создайте карусельную открытку, как в Instagram, с помощью Reactjs, Material-UI и Swiperjs.

Вы можете продемонстрировать сайт здесь

Видеоурок

Об этом я уже снял видео на своем ютуб-канале. Проверьте это для более подробной информации.

Примечание:

Приложение построено с помощью Material-UI V4. Текущая версия — 5. Но не волнуйтесь. Вы все еще можете использовать код. Вам нужно только изменить пути импорта компонентов. Все остальное будет таким же. Проверьте их документы для более подробной информации.

Настройка с нуля

Создать приложение «создать-реагировать»

npx create-react-app <app>
cd <app>

Установить пакеты

yarn add @material-ui/core @material-ui/icons swiper

Начните с минимальной настройки

git clone [email protected]:thatanjan/insta-carousel-yt.git
cd insta-carousel-yt
git fetch
git checkout scratch

Создайте контейнер и заголовок приложения

// App.js
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
import PostCard from './PostCard'
function App() {
    return (
        <div className='App'>
            <Grid container>
                <Grid
                    iem
                    xs={12}
                    style={{ height: '25vh', display: 'grid', placeItems: 'center' }}
                >
                    <Typography variant='h3'>Insta Carousel</Typography>
                </Grid>
                <Grid item container xs={12} justifyContent='center'>
                    <Grid item xs={3}>
                        <PostCard />{' '}
                    </Grid>
                </Grid>
            </Grid>
        </div>
    )
}
export default App

Объяснение:

• Создан заголовок, который будет центрирован.
• Сделал контейнер с открыткой, который займет 3 сетки из 12. Если вы не знаете о сетке Material UI, вы можете посмотреть следующее видео.

import React from 'react'
import { Swiper, SwiperSlide } from 'swiper/react'
import { makeStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card'
import CardHeader from '@material-ui/core/CardHeader'
import CardMedia from '@material-ui/core/CardMedia'
import CardContent from '@material-ui/core/CardContent'
import CardActions from '@material-ui/core/CardActions'
import Avatar from '@material-ui/core/Avatar'
import IconButton from '@material-ui/core/IconButton'
import Typography from '@material-ui/core/Typography'
import FavoriteIcon from '@material-ui/icons/Favorite'
import ShareIcon from '@material-ui/icons/Share'
import MoreVertIcon from '@material-ui/icons/MoreVert'
import CommentIcon from '@material-ui/icons/Comment'
import SwiperCore, {
    Keyboard,
    Scrollbar,
    Pagination,
    Navigation,
} from 'swiper/core'
import 'swiper/swiper.min.css'
import 'swiper/components/pagination/pagination.min.css'
import 'swiper/components/navigation/navigation.min.css'
import 'swiper/components/scrollbar/scrollbar.min.css'
import avatarImage from './media/postAvatar.jpg'
import ts_1 from './media/carousels/ts_1.jpg'
import ts_2 from './media/carousels/ts_2.jpg'
import ts_3 from './media/carousels/ts_3.jpg'
import ts_4 from './media/carousels/ts_4.jpg'
import ts_5 from './media/carousels/ts_5.jpg'
const useStyles = akeStyles({
    media: {
        height: 0,
        paddingTop: '100%',
    },
    swiperContainer: {
        paddingBottom: '3rem',
        '& .swiper-pagination-bullet': {
            background: 'blue',
        },
        '& .swiper-button-next:after': {
            fontSize: '2rem !important',
        },
        '& .swiper-button-prev:after': {
            fontSize: '2rem !important',
        },
    },
})
SwiperCore.use([Keyboard, Scrollbar, Pagination, Navigation])
const images = [ts_1, ts_2, ts_3, ts_4, ts_5]
const PostCard = () => {
    const { media, swiperContainer } = useStyles()
    return (
        <Card>
            <CardHeader
                avatar={<Avatar src={avatarImage} />}
                title='Just a Carousel'
                subheader={new Date().toDateString()}
                action={
                    <IconButton>
                        <MoreVertIcon />
                    </IconButton>
                }
            />
            <Swiper
                grabCursor
                keyboard={{ enabled: true }}
                pagination={{ clickable: true }}
                navigation
                loop
                className={swiperContainer}
            >
                {images.map((image, index) => (
                    <SwiperSlide key={index}>
                        <CardMedia className={media} image={image} />
                    </SwiperSlide>
                ))}
            </Swiper>
            <CardActions disableSpacing>
                <IconButton>
                    <FavoriteIcon />
                </IconButton>
                <IconButton>
                    <CommentIcon />
                </IconButton>
                <IconButton>
                    <ShareIcon />
                </IconButton>
            </CardActions>
            <CardContent>
                <Typography variant='body2' color='textSecondary' component='p'>
                    Adipisicing eaque temporibus elit incidunt obcaecati. Aut eum excepturi id
                    aut consequatur ex? Incidunt debitis at consequuntur accusamus rerum
                    Tempora veritatis maiores quam molestias aut placeat qui. Iure neque libero
                    voluptas aliquid!
                </Typography>
            </CardContent>
        </Card>
    )
}
export default PostCard

Объяснение:

• Мы использовали card, cardHeader и другие компоненты из Material UI.
• В компоненте CardMedia будет наш образ. Он имеет немного индивидуального стиля, поэтому он остается отзывчивым на любом размере экрана и всегда поддерживает соотношение сторон.
• Мы импортировали Keyboard, Scrollbar, Pagination, Navigation модулей из Swiperjs. Чтобы была навигация, навигация с клавиатуры и тд.
• Мы добавили пользовательские стили в компонент Swiper, чтобы изменить значки компонента Swiper.

И проект готов. Пожалуйста, посмотрите видео для более подробной информации.