проблема с интеграцией material-ui ImageList с react-material-ui-carousel / indexing clicked image

У меня возникли проблемы с загрузкой response-material-ui-carousel на проиндексированном изображении onClick.

Вот как далеко я продвинулся:

      import ImageList from '@material-ui/core/ImageList';
import ImageListItem from '@material-ui/core/ImageListItem';
import HighlightOffIcon from '@material-ui/icons/HighlightOff';
import Carousel from 'react-material-ui-carousel';

export default function Dashboard() {
const [gallery, setGallery] = React.useState(true);
const [carousel, setCarousel] = React.useState(false);
const [slidePosition, setSlidePosition] = React.useState([]);

const images = [
    { id: 1, src: `${image1}` },
    { id: 2, src: `${image2}` },
    { id: 3, src: `${image3}` },
]

const showCarousel = (e) => {
        setGallery(false);
        setSlidePosition(e.target);
        setCarousel(true);

const showGallery = () => {
        setCarousel(false);
        setGallery(true);
    }

return(
<div>

{gallery && (
<div className="gallery">
<div className={classes.root}>
<ImageList rowHeight={160} className={classes.imageList} cols={3}>
{pics.map((image, index) => (
     <ImageListItem key={index} cols={image.cols || 1} >
         <img key={index} id={image.id} src={image.src} alt="" maxHeight="100px"
          onClick={showCarousel}
         />
     </ImageListItem>
))}
</ImageList>
</div>
</div>
)}

{carousel && (
 <Carousel>
    {images.map((image, index) => (
         <div key={index} cols={image.cols || 1} style={{ display: "flex", 
         justifyContent: "center" }}>
         <img key={index} id={slidePosition.id} src={slidePosition.src} alt="" 
         maxHeight="100px" onClick={showGallery}
         />
</div>
))}
</Carousel>
)
}
)
</div>
}

Текущее решение будет показывать расширенное представление карусели изображения из ImageList, однако при переходе оно не будет отображать остальные изображения, а будет повторять одно и то же изображение. В противном случае, без хука [slidePosition, setSlidePosition], карусель просто начнется с изображения [0] массива.

0 ответов

Другие вопросы по тегам