// import React from 'react';
import Carousel from 'react-material-ui-carousel'

// сама карусель - ее нужно вынеси в отдельный контенйре
export const MyCarousel = function Example(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', // 5
                zIndex: 999,
                position: 'inherit' // 4
            }

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

function Item(props) {
    return (
        <div style={{
            width: 500,
            height: 625,
            backgroundColor: 'black',
            display: 'flex',
            alignItems: 'center'
        }}>
            <img src={props.item.url} style={{
                width: '100%',
            }} />
        </div>
    )
}