时间戳

首页 > 解决方案 > Material UI Carousel 上的多个项目

javascript - Material UI Carousel 上的多个项目

问题描述

我正在使用以下Material UI Carousel库，但我无法理解如何为轮播创建多个项目。

我在文档中搜索过，那里没有解决方案，尝试通过定义宽度来使用 CSS 进行操作，如下所示：

  .item{
    margin: 0 auto;
    text-align: center;
    width: 30%;
  }

也没有用。

这是我的代码：

 function Home() {
  var items = [
    {
        name: "Pizza Begin",
        link: "pizza-begin.co.il",
        image: Begin
    },
    {
        name: "Mia Luz",
        link: "mia-luz.com",
        image: Mia
    },
    {
        name: "Nuda Swim",
        link: "nudaswim.com"
    }
   ];


   return(<>
    <Carousel navButtonsAlwaysInvisible={true} animation="slide" activeIndicatorIconButtonProps={{className: "activeIndicator"}}>
        {
            items.map( (item, i) => <Item key={i} item={item} /> )
        }
    </Carousel>

</>);
}

function Item(props)
{
    return (
        <Paper className="item">
            <img className="imageCarousel" src={props.item.image} alt={props.item.name} />
            <h2 onClick={() => { window.location.href = props.item.link; }}>{props.item.name}</h2>
        </Paper>
    )
}

export default Home;

现在每张幻灯片包含一个项目，我的目标是在每张幻灯片上达到 3 个项目。

如何使用 Material UI Carousel 在一张幻灯片中使用多个项目？

代码沙盒

标签： javascriptcssreactjsmaterial-ui

解决方案

沙洛姆！
问题出在 Carousel 组件内部。

我是 Material UI 的新手，但似乎每个数组元素在滑块上都有一个“页面”。

所以我所做的，它给了我你正在寻找的结果，看起来像这样：

    const sliderItems: number = data.length > 3 ? 3 : data.length;
  const items: Array<any> = [];

  for (let i = 0; i < data.length; i += sliderItems) {
    if (i % sliderItems === 0) {
      items.push(
        <Card raised className="Banner" key={i.toString()}>
          <Grid container spacing={0} className="BannerGrid">
            {data.slice(i, i + sliderItems).map((da, index) => {
              return <SubCategory key={index.toString()} item={da} />;
            })}
          </Grid>
        </Card>
      );
    }
  }
  return (
    <Carousel animation="slide" autoPlay={false} cycleNavigation timeout={300}>
      {items}
    </Carousel>
  );
};

我为每个滑块选择了 3 个项目。items 数组包含卡片数组。

推荐阅读