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

Question

With only installing bootstrap in create-react-app unable to navigate to the next and previous slide. Here I'm using bootstrap class with HTML.

P.S : Only with bootstrap not 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>
  );
}

Here I'm using scss and imported bootstrap scss in style.scss and imported in App.js

@import "~bootstrap/scss/bootstrap";

Is any dependency missing to be added?

CODESANDBOX LINK

Answer 1

Since you only use bootstrap you need to handle the Carousel state on your own.

You can try using useState to handle the selected image like below. You can conditionally set the button and image element class names to get the correct CSS applied.

I also used classnames package to set the class names nicely.

Solution 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>
  );
}

Code sandbox => https://codesandbox.io/s/friendly-kirch-235v5?file=/src/Carousel.js

Solution 2

You can include JS and CSS bundle given in the docs.

Code sandbox => https://codesandbox.io/s/clever-glitter-ttqqe?file=/public/index.html