css - 标题 : Creating an infinite logo slider using React and CSS without third-party libraries

Question

我正在使用 CSS 在我的 React 应用程序中实现 Logo slider 。我希望 slider 表现为无限循环，其中幻灯片中的最后一个 Logo 后面跟着第一个 Logo ，并且此模式无限期地继续。

目前，我在 TSX 文件中的实现如下所示:

<section className={classes['container']}>
    <div className={classes['logosSlide']}>
        {props.clientsContent?.map((client, i) => (
            <span key={i}>{client.attributes.clientName}</span>
        ))}
    </div>
</section>

您能否指导我仅使用 React 和 CSS 实现此无限循环功能，而不依赖任何第三方库？

感谢您提供的任何帮助。

Answer 1

将 CSS 样式添加到您的组件:

import React, { useEffect } from 'react';
import classes from './LogoSlider.module.css';

const LogoSlider = (props) => {
  useEffect(() => {
    const container = document.querySelector(`.${classes.container}`);
    const slide = document.querySelector(`.${classes.logosSlide}`);

    const cloneSlide = slide.cloneNode(true);
    container.appendChild(cloneSlide);
  }, []);

  return (
    <section className={classes.container}>
      <div className={classes.logosSlide}>
        {props.clientsContent?.map((client, i) => (
          <span key={i}>{client.attributes.clientName}</span>
        ))}
      </div>
    </section>
  );
};

export default LogoSlider;

在单独的 CSS 文件中定义 CSS 样式(例如，LogoSlider.module.css):

.container {
  width: 100%;
  overflow: hidden;
}

.logosSlide {
  display: flex;
  animation: slide infinite 20s linear;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}