标题：在没有第三方库的情况下使用 React 和 CSS 创建无限徽标滑块-解网

问：

我正在使用 CSS 在我的 React 应用程序中实现徽标滑块。我希望滑块表现为无限循环，其中幻灯片中的最后一个徽标后跟第一个徽标，并且此模式无限期地持续下去。

目前，我在 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 实现这种无限循环功能，而不依赖任何第三方库？

感谢您提供的任何帮助。

CSS ReactJS 打字稿滑块 Infinity

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文件（例如，LogoSlider.module.css）中定义CSS样式：

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

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

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

上一个：将 QString：：arg（double a）与 std：：numeric_limits<double>：：infinity（）一起使用

下一个：seq.default（min（x）， max（x）， length = evaluation）中的错误：使用 scatterplotMatrix 函数时，“from”必须是有限数

标题：在没有第三方库的情况下使用 React 和 CSS 创建无限徽标滑块

Title: Creating an infinite logo slider using React and CSS without third-party libraries

评论