[英]Why my react `Carousel` does not render properly?
So I'm using react-multi-carousel
and it looks like this:所以我正在使用
react-multi-carousel
,它看起来像这样:
Carousel component:轮播组件:
import Carousel from 'react-multi-carousel';
const Container = ({movies}: {movies:MovieResults | null}) => {
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 6,
slidesToSlide: 3 // optional, default to 1.
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 4,
slidesToSlide: 4 // optional, default to 1.
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 3,
slidesToSlide: 3 // optional, default to 1.
}
};
const few_movies = movies?.results.slice(1,10);
return (
<div>
{movies?.results ?
<Carousel
swipeable={true}
draggable={false}
//showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
//infinite={true}
// autoPlaySpeed={2000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
{movies?.results?.map((movie) =>
<Link to={`/movie/${movie.id}`} replace style={{ textDecoration: 'none' }}><MovieItem movie={movie} key={movie.id}/></Link>
)}
</Carousel>
:
<div>Loading...</div>
}
</div>
)
}
Styles: Styles:
.container{
@include flex(center, center);
position: relative;
flex-wrap: wrap;
width:100%;
height:100%;
z-index: 1;
}
What it looks like in a parent component:它在父组件中的样子:
<div className="section mb-3">
<div className="section__header mb-2">
<h2 style={{color:"#fff"}}>Now playing movies</h2>
<Link to="/playing" className="movies_link">Explore all</Link>
</div>
{playing ? <Container movies={playing}/> : <div>Loading</div>}
</div>
But I have a problem, when I open the page it can just randomly render in some weird way, here's the screenshot:但是我有一个问题,当我打开页面时它可以以某种奇怪的方式随机呈现,这是屏幕截图:
It just goes down vertically and other elements are below too, it doesn't happen everytime, but it can happen randomly.它只是垂直向下,其他元素也在下面,它不会每次都发生,但它可以随机发生。 So I want to figure out how can I always it in a proper way.
所以我想弄清楚如何才能始终以正确的方式进行。
I don't know actually what causes your problem but maybe i can point out things that can be helpful if they changes:我实际上不知道是什么导致了您的问题,但也许我可以指出如果它们发生变化可能会有所帮助的事情:
responsive
object i think different views have to have different breakpoint values.responsive
对象时,我认为不同的视图必须具有不同的断点值。 Like: {
desktop: {
breakpoint: { max: 3000, min: 1024 }
},
tablet: {
breakpoint: { max: 1023.98, min: 464}
}
}
&&
operator:&&
运算符,而不是三元运算符: {playing && <Container movies={playing}/>}
{!playing && <div>Loading</div>}
{movies?.results?.map((movie) =>
<Link
to={`/movie/${movie.id}`}
key={movie.id}
replace
style={{ textDecoration: 'none' }}
>
<MovieItem movie={movie} />
</Link>
)}
{movies?.results?.map((movie) =>
<Link to={`/movie/${movie.id}`} key={movie.id}><MovieItem movie={movie}/></Link>
)}
.carousel-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
flex-wrap: wrap;
gap: 10px;
width:100%;
height:100%;
z-index: 1;
}
which you should change to:您应该更改为:
.carousel-container{
position: relative;
width:100%;
height:100%;
z-index: 1;
}
react-multi-carousel
:react-multi-carousel
导入 css:import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
In short, I am pretty sure its the flex styling on your Carousel Container.简而言之,我很确定它是 Carousel Container 上的 flex 样式。 Please also consider you are styling the container with flex: wrap, which is possibly causing your items to stack.
还请考虑您正在使用 flex: wrap 为容器设置样式,这可能会导致您的项目堆叠。
Also on a smaller screen you may actually only want to display a single item.同样在较小的屏幕上,您实际上可能只想显示单个项目。
const responsive = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 6,
slidesToSlide: 3 // optional, default to 1.
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 4,
slidesToSlide: 4 // optional, default to 1.
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
slidesToSlide: 1 // optional, default to 1.
}
};
I believe that you forgot to add import 'react-multi-carousel/lib/styles.css';
我相信你忘了添加
import 'react-multi-carousel/lib/styles.css';
to your top-level file.到您的顶级文件。 Eg:
_app.tsx
for NextJS.例如:
_app.tsx
的 _app.tsx。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.