Question

我创建了一个Web应用程序，该应用程序在首页上显示蛋糕产品。我在React中编写了代码，一切正常。目前，我的应用程序看起来像这样

上面显示前3个产品（蛋糕），下面显示后3个产品。现在，我需要这样的产品，其中项目代表蛋糕的图像。如何才能做到这一点？

我的TSX代码到目前为止是：-

import React from 'react'
import { Container } from 'semantic-ui-react';

const numberOfPicture = [1, 2, 3, 4, 5, 6];

const Product = () => {
    return (
        <Container>
            <div className='ui three column grid' id="cakesProduct">
                {numberOfPicture.map((picture, index) => (
                    <div className="column" key={index}>
                        <div className="ui fluid card">
                            <div className="image">
                                <img src={`assets/cakes/cake-${picture}.jpg`} />
                            </div>
                        </div>
                    </div>
                ))}
            </div>
        </Container >




    );
}

export default Product

Answer 1

您甚至都没有尝试在给定的代码段或沙箱中实现滑块。

阅读文档，并查看您提到的npm软件包给您提供的示例代码：e react-horizontal-scrolling-menu。

这里是您的组件快速编写的代码，因此您可以将其复制粘贴到您的codeandbox中，您可能想重新设置样式并使用CSS，但这是箭头起作用的起点：

const Product = () => {
  return (
    <ScrollMenu
      arrowLeft={<div style={{ fontSize: "30px" }}>{" < "}</div>}
      arrowRight={<div style={{ fontSize: "30px" }}>{" > "}</div>}
      data={numberOfPicture.map((picture, index) => (
        <img
          style={{ height: "100px" }}
          alt="test"
          src="https://reactjs.org/logo-og.png"
        />
      ))}
    />
  );
};

如何在React JS中使用箭头制作水平滚动？

1 个答案: