实现Div无限循环左滚动（吃豆人效果）及Splide组件问题解决

问题背景 #

我有一个包含6个子div的.container容器，每个子div尺寸为25rem×25rem，基础代码如下：

基础CSS代码 #

.container {
  display: flex;
  gap: 1rem;
}

.container>div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-radius: 1rem;
  box-shadow: rgba(24, 29, 38, 0.24) 0px 0px 0px, rgba(24, 29, 38, 0.08) 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 0px 0px;
  width: 25rem;
  border: 1px solid lightgray;
  padding: 1rem;
  height: 25rem;
}

基础HTML代码 #

<div class='container'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

需求：实现子div向左无限滚动的动画，元素移出屏幕后从右侧重新出现，形成类似"吃豆人"穿越屏幕的循环效果。

尝试过程与问题 #

我尝试使用Splide组件实现该效果，但遇到元素无法自动播放和滚动的问题，当时的代码如下：

<Splide
  options={{
    type: 'slide',
    perPage: 2,
    drag: 'free',
    focus: 'center',
    autoplay: true,
    arrows: false,
    start: 4,
    pagination: false,
    wheel: true,
    interval: 3000,
    direction: 'rtl', // 设置为从右到左方向
  }}
>
  <SplideSlide>🟡</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
</Splide>

最终解决方案 #

在@TanishqS的帮助下，通过引入Splide的AutoScroll扩展并调整配置参数，成功实现了需求效果，最终代码如下：

import { AutoScroll } from "@splidejs/splide-extension-auto-scroll";

<Splide
  className="splide"
  options={{
    type: "loop",
    pagination: false,
    wheel: true,
    direction: "ltr",
    interval: 3000,
    drag: "free",
    focus: "center",
    perPage: 5,
    autoplay: true,
    autoScroll: {
      speed: 1,
    },
    arrows: false,
    gap: '10px'
  }}
  extensions={{ AutoScroll }}
>
  <SplideSlide>🟡</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
  <SplideSlide>👾</SplideSlide>
</Splide>

内容的提问来源于stack exchange，提问作者zequuee1