Question

我在创建无限自动播放徽标轮播时遇到问题。我想在 React 项目中创建轮播。我认为有两种方法可以创建它。一种使用 JavaScript。其次只使用 CSS。我如何实现这一目标？

注意：我正在使用样式组件。另外，作为logo的SVG包含很多数据，我举个例子就空了。

   const Container = styled.div`` 
   
   const Slider = styled.div`
           display: flex;
           flex-wrap: nowrap;
          
           div{
              width: 300px;
              height: 200px;
              background: #fff;
              overflow: hidden;
              padding: 15px 15px;
              margin: 0px 12px;
    

             svg{
               max-height: 100%;
               width: 100%;
             }
           }

 const Clients = () => {
        return (
           <Container>
             <Slider>
               <div><svg></svg></div> 
               <div><svg></svg></div> 
               <div><svg></svg></div> 
               <div><svg></svg></div> 
               <div><svg></svg></div> 
               <div><svg></svg></div> 
               <div><svg></svg></div> 
            </Slider>
          </Container>
    )}

Answer 1

我的建议是使用 JavaScript。一种方法是首先创建图像集合，例如包含图像链接的对象数组。

[
{"image": "url"},
{"image": "url"}
]

然后将此数据导入到您的组件中，并使用 map 对其进行迭代，并每隔 x 秒更改一次幻灯片。 Here's 如果您需要更多帮助，请查看相关指南。

此外，您可能应该在 const Clients 之前添加另一个 ` 以结束样式化 div。

如何创建自动播放徽标轮播？

1 个答案: