Is there any other way to use react-multi-carousel with NEXT.js and React/Typescript

Question

I imported react-multi-carousel module and set the simple carousel. But it's not working. There are no <li> tags.

Rendered HTML is below.

<ul class="react-multi-carousel-track " style="transition:none;overflow:unset;transform:translate3d(0px,0,0)"></ul>

<div className={classes.profileCarousel}>
    <Carousel
        additionalTransfrom={0}
        arrows={false}
        autoPlaySpeed={0}
        centerMode={false}
        className={classes.carousel}
        customButtonGroup={<ButtonGroup/>}
        customDot = {<CustomDots/>}
        dotListClass={classes.customDotList}
        draggable
        focusOnSelect={false}
        infinite={true}
        keyBoardControl
        minimumTouchDrag={80}
        partialVisible
        renderButtonGroupOutside
        renderDotsOutside
        responsive={responsive}
        showDots
        sliderClass=""
        slidesToSlide={1}
        swipeable
    >
        {profiles.map(element => {
            return <ProfileCard props={element} key="as"/>
        })}
    </Carousel>
</div>

stack: next.js typescript material-ui

What's wrong with it?

Answer 1

I already had this problem with this lib.

Basically it is because the brake points have not been set correctly.

This is a standard object I created, try using it and see if it works for you.

export const carouselBreakPoints = {
  desktopWide: {
    breakpoint: {
      max: 2560,
      min: 1421,
    },
    items: 6,
    partialVisibilityGutter: 40,
  },
  laptopM: {
    breakpoint: {
      max: 1420,
      min: 0,
    },
    items: 5,
    partialVisibilityGutter: 40,
  },
  laptopL: {
    breakpoint: {
      max: 1150,
      min: 0,
    },
    items: 4,
    partialVisibilityGutter: 30,
  },
  laptop: {
    breakpoint: {
      max: 940,
      min: 0,
    },
    items: 3,
    partialVisibilityGutter: 30,
  },
  tabletL: {
    breakpoint: {
      max: 750,
      min: 0,
    },
    items: 1.7,
    partialVisibilityGutter: 30,
  },
  mobile: {
    breakpoint: {
      max: 400,
      min: 0,
    },
    items: 1,
    partialVisibilityGutter: 30,
  },
};