有沒有其他方法可以將 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,
  },
};