reactjs - 有没有其他方法可以将 react-multi-carousel 与 NEXT.js 和 React/Typescript 一起使用

Question

我导入了 react-multi-carousel模块并设置了简单的轮播。但它不起作用。没有<li>标签。

渲染的 HTML 如下。

<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>

堆：next.js typescript material-ui

它出什么问题了？

Answer 1

这个库我已经遇到了这个问题。

基本上是因为没有正确设置刹车点。

这是我创建的标准对象，请尝试使用它，看看它是否适合您。

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,
  },
};