在反应轮播中添加幻灯片动画答案

【问题标题】：Adding a slide animation in a react carousel在反应轮播中添加幻灯片动画
【发布时间】：2021-04-24 18:40:45
【问题描述】：

我正在尝试使用纯 JS 和 React 从 react-bootstrap 重新制作 carousel。

到目前为止，我的轮播会每隔几秒自动切换到下一张幻灯片，然后循环回到开头。它还可以在单击按钮时显示特定的轮播幻灯片。

但是，我无法复制从右到左的滑动动画，因为我使用slice 来渲染我的幻灯片。如何编辑我的代码以包含像引导程序这样的滑动动画？

import React, { useState, useEffect } from "react";
import "./styles.css";

const slides = [
  {
    src:
      "https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7638-01.jpg",
    alt: "slide 1",
    caption: "slide 1"
  },
  {
    src:
      "https://res.cloudinary.com/tpostr/image/upload/v1553865338/paparouna/IMG_7621-01.jpg",
    alt: "slide 2",
    caption: "slide 2"
  },
  {
    src:
      "https://res.cloudinary.com/tpostr/image/upload/v1553865337/paparouna/IMG_7615-01.jpg",
    alt: "slide 3",
    caption: "slide 3"
  }
];

export default function App() {
  const [start, setStart] = useState(0);
  const [end, setEnd] = useState(1);

  const first = () => {
    setStart(0);
    setEnd(1);
  };
  const second = () => {
    setStart(1);
    setEnd(2);
  };
  const third = () => {
    setStart(2);
    setEnd(3);
  };

  useEffect(() => {
    const timeout = setTimeout(() => {
      setStart((start) => start + 1);
      setEnd((end) => end + 1);
    }, 3000);

    if (end === slides.length + 1) {
      setStart(0);
      setEnd(1);
    }

    return () => {
      clearTimeout(timeout);
    };
  }, [start, end]);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {slides.slice(start, end).map((slide, i) => (
        <div key={i}>
          <img src={slide.src} alt={slide.alt} />
          <p>{slide.caption}</p>
          <button onClick={first}>first</button>
          <button onClick={second}>second</button>
          <button onClick={third}>third</button>
        </div>
      ))}
      <p>{start} start</p>
      <p>{end} end</p>
    </div>
  );
}

我的codesandbox

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

只要您的三张图片未在 html 页面中一起显示，您就无法对它们进行幻灯片动画处理。你为什么不把它们全部显示出来，然后像普通滑块一样在它们的位置之间切换？

如果您通过更改src 属性来更改图像，则无法使用动画。请参考this answer，然后从那里继续。

很抱歉让您失望了...祝您愉快！

但这里是一个纯js滑块link

【讨论】：

【解决方案2】：

我认为这种方式不可能实现动画效果，因为您正在使用 src 属性切换黑白图像。我找到了这个链接，它似乎在不使用任何外部库的情况下工作。看看吧：https://dev.to/cooljasonmelton/css-transitions-in-react-build-a-root-beer-carousel-1mnb

【讨论】：