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

问题描述

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

呈现的 HTML 如下。

<ul class="react-multi-carousel-track " style="transition:none;overflow:unset;transform:translate3d(0px,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

这是怎么回事？

解决方法

这个库我已经有这个问题了。

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

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

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