我是 React 新手,我正在尝试将 Mantine 组件实现到我的项目中。这些组件之一是轮播组件,它在我的场景中被冻结。我真的不知道为什么,我希望有人知道这个问题。我认为这与css有关。
CardsCarousel.tsx:
import { Carousel } from '@mantine/carousel';
import { useMediaQuery } from '@mantine/hooks';
import { Image, Paper, Text, Title, Button, useMantineTheme, rem } from '@mantine/core';
import classes from './CardsCarousel.module.css';
interface CardProps {
image: string;
title: string;
category: string;
}
function Card({ image, title, category , onClick }: CardProps) {
return (
<Button className={classes.card} style={{
background: 'rgba(0, 0, 0, 0.7)',
padding: '0',
borderRadius: '0',
objectFit: 'fill',
height: '100%',
}
}onClick={onClick}>
<Image src={image} radius="0px" className={classes.image}/>
</Button>
);
}
const data = [
{
image:
'https://docs.fivem.net/vehicles/baller3.webp',
title: '\n\n\n\n\n',
category: 'nature',
onClick: () => alert('baller3'),
},
...
{
image:
'https://docs.fivem.net/vehicles/tenf2.webp',
title: 'Hawaii beaches review: better than you think',
category: 'beach',
onClick: () => alert('tenf2'),
},
];
export function CardsCarousel() {
const theme = useMantineTheme();
const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
const slides = data.map((item) => (
<Carousel.Slide key={item.title}>
<Card {...item} />
</Carousel.Slide>
));
return (
<Carousel slideSize="18%" height={"100%"} align="start" slideGap="md" dragFree withIndicators slidesToScroll={5}>
{slides}
</Carousel>
);
}
CardsCarousel.module.css:
.card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
background-size: cover;
background-position: center;
flex-basis: auto;
transition: border-color 0.3s ease;
cursor: pointer;
}
.card:hover {
border: 4px solid white;
}
.image {
transition: transform 0.3s ease;
}
.card:hover .image {
transform: scale(1.05);
bottom: 5px;
left: 5px;
color: white;
}
在我的 app.css 中,轮播在网格模板中定义为 c:
.app-container {
display: grid;
user-select: none;
grid-template-areas:
"a b"
"a c"
;
grid-template-columns: 10% 90%;
grid-template-rows: 80% 20%;
}
.carousel-grid {
grid-area: c;
}
我尝试将 CardsCarousel.module.css 中的 .card 更改为 CardsCarousel.tsx 样式,如果我将轮播设置为循环模式,则轮播会被冻结,并在其上方显示另一个轮播。如果我在浏览器中放大/缩小,轮播就会按预期工作。
嗨,希望您已经找到问题的答案,但如果还没有 我建议减少 SlidesToScroll 的数量,因为它不是用于指示轮播中幻灯片总数的属性,而是用于在视图端口上立即显示的幻灯片数量。