React Mantine 旋转木马被冻结了

Question

我是 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 样式，如果我将轮播设置为循环模式，则轮播会被冻结，并在其上方显示另一个轮播。如果我在浏览器中放大/缩小，轮播就会按预期工作。

Answer 1

嗨，希望您已经找到问题的答案，但如果还没有 我建议减少 SlidesToScroll 的数量，因为它不是用于指示轮播中幻灯片总数的属性，而是用于在视图端口上立即显示的幻灯片数量。