如何仅在反应中使用引导程序（5.1v）中的轮播？

Question

仅在 create-react-app 中安装 bootstrap 无法导航到下一张和上一张幻灯片。这里我使用bootstrap 类和HTML。

P.S : 仅适用于 bootstrap 而不是 react-bootrap。

Carousel.js

export default function Carousel() {
  return (
    <div className="Carousel">
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
      >
        <div class="carousel-indicators">
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="0"
            class="active"
            aria-current="true"
            aria-label="Slide 1"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="1"
            aria-label="Slide 2"
          ></button>
          <button
            type="button"
            data-bs-target="#carouselExampleIndicators"
            data-bs-slide-to="2"
            aria-label="Slide 3"
          ></button>
        </div>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img
              src="https://www.whats-on-netflix.com/wp-content/uploads/2018/09/naruto-on-netflix.jpg"
              class="d-block w-100"
              alt="naruto"
            />
          </div>
          <div class="carousel-item">
            <img
              src="https://pbs.twimg.com/media/EZVmgtkVcAAYpWP.jpg"
              class="d-block w-100"
              alt="eren"
            />
          </div>
          <div class="carousel-item">
            <img
              src="https://media.comicbook.com/2021/06/dragon-ball-z-goku-1273631-1280x0.jpeg"
              class="d-block w-100"
              alt="goku"
            />
          </div>
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  );
}

这里我使用 scss 并在 style.scss 中导入 bootstrap scss 并在 App.js 中导入

@import "~bootstrap/scss/bootstrap";

是否缺少需要添加的依赖项？

CODESANDBOX LINK

Answer 1

由于您只使用bootstrap，因此您需要自行处理Carousel 状态。

您可以尝试使用useState 来处理所选图像，如下所示。您可以有条件地设置button 和image 元素class 名称以应用正确的CSS。

我还使用classnames 包很好地设置了类名。

解决方案 1

import React, { useState } from "react";
import classNames from "classnames";

const images = [
  {
    url:
      "https://www.whats-on-netflix.com/wp-content/uploads/2018/09/naruto-on-netflix.jpg",
    alt: "naruto"
  },
  {
    url: "https://pbs.twimg.com/media/EZVmgtkVcAAYpWP.jpg",
    alt: "eren"
  },
  {
    url:
      "https://media.comicbook.com/2021/06/dragon-ball-z-goku-1273631-1280x0.jpeg",
    alt: "goku"
  }
];
export default function Carousel() {
  const [index, setIndex] = useState(0);

  const handleNext = () => {
    setIndex((prevIndex) =>
      prevIndex < images.length - 1 ? prevIndex + 1 : 0
    );
  };

  const handlePrev = () => {
    setIndex((prevIndex) =>
      prevIndex > 0 ? prevIndex - 1 : images.length - 1
    );
  };

  return (
    <div className="Carousel">
      <div
        id="carouselExampleIndicators"
        class="carousel slide"
        data-bs-ride="carousel"
      >
        <div class="carousel-indicators">
          {Array.from(Array(images.length).keys()).map((buttonIndex) => (
            <button
              type="button"
              data-bs-target="#carouselExampleIndicators"
              data-bs-slide-to={buttonIndex}
              class={classNames({
                active: buttonIndex === index
              })}
              aria-current="true"
              aria-label={`Slide ${buttonIndex + 1}`}
              onClick={() => setIndex(buttonIndex)}
            ></button>
          ))}
        </div>
        <div class="carousel-inner">
          {images.map(({ url, alt }, imageIndex) => (
            <div
              class={classNames("carousel-item", {
                active: imageIndex === index
              })}
            >
              <img src={url} class="d-block w-100" alt={alt} />
            </div>
          ))}
        </div>
        <button
          class="carousel-control-prev"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="prev"
          onClick={handlePrev}
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Previous</span>
        </button>
        <button
          class="carousel-control-next"
          type="button"
          data-bs-target="#carouselExampleIndicators"
          data-bs-slide="next"
          onClick={handleNext}
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="visually-hidden">Next</span>
        </button>
      </div>
    </div>
  );
}

代码沙箱 => https://codesandbox.io/s/friendly-kirch-235v5?file=/src/Carousel.js

解决方案 2

您可以包含 docs 中给出的 JS 和 CSS 包。

代码沙箱 => https://codesandbox.io/s/clever-glitter-ttqqe?file=/public/index.html