[英]Is there any other way to use react-multi-carousel with NEXT.js and React/Typescript
我导入了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
它出什么问题了?
这个库我已经有这个问题了。
基本上是因为刹车点没有设置正确。
这是我创建的标准对象,尝试使用它,看看它是否适合您。
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,
},
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.