homework/js/Project/project/src/components/post/carousel.js

import Carousel from 'react-material-ui-carousel'
import { Box } from '@mui/system';

import { url } from '../../App';


// карусель
export function MyCarouselPost({ postImages }) {
    // console.log('postImages: ', postImages)

    return (postImages &&
        <Carousel
            autoPlay={false}
            cycleNavigation={false}
            animation={"slide"}
            indicatorContainerProps={{
                style: {
                    marginTop: '-50px',
                    zIndex: 999,
                    position: 'inherit'
                }
            }}
            className='myCarousel'

            sx={{
                // flexDirection: 'column',
                // flex: '1 1 auto',
                width: '100%',
                height: '100%',

            }}

        >
            {
                postImages.map(item =>
                    // <Box
                    //     sx={{
                    //         paddingTop: '100%',
                    //         backgroundSize: 'contain',
                    //         backgroundColor: 'black',
                    //         backgroundImage: `url(/images/noPhoto.png)`,
                    //         backgroundRepeat: 'no-repeat',
                    //         backgroundPosition: 'center',
                    //     }}

                    //     key={item?.url}

                    //     style={item?.url &&
                    //         { backgroundImage: `url(${url + item.url})` }
                    //     }
                    // />
                    <Box sx={{
                        width: '100%',
                        height: '743px',
                        overflow: 'hidden',
                        position: 'relative'
                    }}

                        key={item?.url}
                    >
                        <img
                            style={{
                                position: 'absolute',
                                top: '50%',
                                left: '50%',
                                transform: 'translate(-50%, -50%)',
                                width: '100%',
                                height: '100%',
                                objectFit: 'contain',
                                objectPosition: 'center'
                            }}

                            src={url + item.url}
                        />
                    </Box>
                )
            }
        </Carousel >
    )
}