import Carousel from 'react-material-ui-carousel'

// айтемы для каждой картинки
function Item(props) {
    return (
        <div style={{
            width: '100%',
            height: 625,
            backgroundColor: 'black',
            display: 'flex',
            alignItems: 'center'
        }}>
            <img alt='alt' src={props.item.url} style={{
                width: '100%'
            }} />
        </div>
    )
}

// сама карусель - ее нужно вынеси в отдельный контенйре
export function MyCarousel(props) {

    let items = [
        {
            url: "/images/image.jpeg"
        },
        {
            url: "/images/image2.jpeg"
        },
        {
            url: "/images/image4.jpeg"
        }
    ]

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

        }} >
            {
                items.map((item, i) => <Item key={i} item={item} />)
            }
        </Carousel >
    )
}

