Javascript 如何使多个图像从左向右移动，并在左侧重新显示（js、react、样式化组件）

我试图使一个横幅的图像不断从左到右动画，同时包装到屏幕的另一侧。现在，我可以让它只处理一个图像，但由于位置是绝对的，我不能让它处理多个图像

这是我下面关于滑动旋转木马类型动画的代码。如果有人能想出如何将所有的图像隔开，并将屏幕从左向右环绕，我将非常感激

import React from 'react'
import styled, {keyframes} from 'styled-components'

const Container = styled.div`
    position: relative;
`

const move = keyframes`
    from {
        left: -30%;
    }
    to {
        left: 100%;
    }
`
const Slide = styled.div`
    position: absolute;
    overflow-x: hidden;
    padding: 0px 20px 0px 20px;
    animation: ${move} 5s linear infinite;
`



export default function Slider(props) {
    let count = 0;
    return (
        <Container>
            {props.slides.map((slide) => (
                <Slide id={`slider1_${count++}`}>
                    {slide}
                </Slide>
            ))}
        </Container>
    )
}

从“React”导入React
从“已设置样式的组件”导入已设置样式的{关键帧}
const Container=styled.div`
位置：相对位置；
`
常量移动=关键帧`
从{
左-30%；
}
到{
左：100%；
}
`
常量幻灯片=styled.div`
位置：绝对位置；
溢出x：隐藏；
填充：0px 20px 0px 20px；
动画：${move}5s线性无限；
`
导出默认功能滑块（道具）{
让计数=0；
返回(
{props.slides.map（（幻灯片）=>(
{幻灯片}
))}
)
}