Material UI Carousel 上的多个项目答案

【问题标题】：Multiple items on Material UI CarouselMaterial UI Carousel 上的多个项目
【发布时间】：2021-06-22 03:06:54
【问题描述】：

我正在使用以下 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 在一张幻灯片中使用多个项目？

Codesandbox

【问题讨论】：

使用这个发送给我完整的演示：codesandbox.io
@m4n0 codesandbox.io/s/angry-davinci-0sj9h?file=/src/App.js
这个怎么样？ x2zto.csb.app
@m4n0 这行得通！但我确实有一个问题，我怎样才能在每次点击时只移动一个项目？
为此，您可能需要稍微更改结构或使用自定义 JS 来覆盖。文档中没有这样的设置。您必须更改 transform 属性。

标签： javascript css reactjs material-ui

【解决方案1】：

沙洛姆！
问题出在 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 数组包含卡片数组。

【讨论】：