height of carousel collapses after reaching the last image - what am I doing wrong?

[PrivFelixKniest]

DISCLAIMER This repo is not actively maintained by the owner. It depends mostly on contributions. Feel free to fork or to raise a PR and we will review when possible.

Describe the bug When the page initially loads, the carousel is larger than the images, placing the dots nicely below the carousel. Whenever the last image is navigated to for the first time the height of the carousel collapses slightly to match the largest (in height) images in the carousel and moving the dots over the image. Am I doing something wrong?

To Reproduce Steps to reproduce the behavior:

1. Implement the carousel
2. navigate around and check the height of the carousel object
3. navigate to the last element
4. check if the height of the object changes

Expected behavior The height should either stay large, which looks good, or small, which looks slightly worse due to my images not having the exact same height yet...

Example See my deployment https://felixkniest.com on the projects section:

Implementation:

import { Box, IconButton, Modal, Button } from "@mui/material"
import Image from "next/image"
import React, { useState } from "react"
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import FullscreenRoundedIcon from '@mui/icons-material/FullscreenRounded';
import { Carousel } from "react-responsive-carousel";

interface ImageCarouselProps {
  images: string[];
  isModal?: boolean
}

export const ImageCarousel: React.FC<ImageCarouselProps> = ({images, isModal}) => {
  const [openPopupCarousel, setOpenPopupCarousel] = useState(false);
  let imagekey = 0;

  return (
    <Box sx={{width: "100%", height: "100%", overflow: "hidden", position: "relative"}}>
      <Modal open={openPopupCarousel} onClose={() => setOpenPopupCarousel(false)}>
        <Box sx={{ display: "flex", justifyContent: "center", height: "100%", pointerEvents: "none"}}>
          <Box sx={{ display: "flex", justifyContent: "center", flexDirection: "column", pointerEvents: "none"}}>
            <Box sx={{width: "90vw", maxWidth: "1000px", height: "auto", pointerEvents:"all"}}>
              <ImageCarousel images={images} isModal />
            </Box>
          </Box>
        </Box>
      </Modal>
      <IconButton onClick={() => !isModal ? setOpenPopupCarousel(true) : null} sx={{border: "none", backgroundColor: "transparent", padding: "0", position: "absolute", top: "3px", left: "3px", display: isModal ? "none" : "block", zIndex: 3}}>
        <FullscreenRoundedIcon color="inherit" sx={{color: "#C6BA9C"}} />
      </IconButton>
      <Carousel>
        {images.map(image => {
        imagekey +=1;
        return (
          <Box  key={imagekey}>
            <Image width={1000} height={600} src={image} alt="Project" style={{width: "100%", height: "auto", filter: isModal ? "none" : undefined}} />
          </Box>
        )
      })}
      </Carousel>
    </Box>
  )
}

Screenshots

Desktop (please complete the following information):

• OS: Windows/ react-nextjs
• Browser Opera GX / Chromium

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.