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

Posted 2023-05-08

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

【英文标题】：How to use Carousel from bootstrap(5.1v) only in react?

【发布时间】：2022-01-14 10:13:50

【问题描述】：

仅在 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"
              
            />
          </div>
          <div class="carousel-item">
            <img
              src="https://pbs.twimg.com/media/EZVmgtkVcAAYpWP.jpg"
              class="d-block w-100"
              
            />
          </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"
              
            />
          </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

【参考方案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

【讨论】：

@Hithesh k，看看这个！！

感谢有效！！，我们可以保留轮播过渡吗getbootstrap.com/docs/5.0/components/carousel