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

Question

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

注意：我正在使用样式化组件。 此外，作为标志的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 秒更改一次幻灯片。 如果您需要更多帮助，请参阅此处的指南。

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