如何仅在 React 中使用来自 bootstrap(5.1v) 的 Carousel？

Question

仅在 create-react-app 中安装 bootstrap 无法导航到下一张和上一张幻灯片。我在这里使用 bootstrap class 和 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 包来很好地设置 class 名称。

解决方案 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

如何仅在 React 中使用来自 bootstrap(5.1v) 的 Carousel？

How to use Carousel from bootstrap(5.1v) only in react?

reactjs

sass

bootstrap-5

bootstrap-carousel