Блог

При установке только bootstrap в create-react-app невозможно перейти к следующему и предыдущему слайду. Здесь я использую bootstrap класс с. HTML

P.S: только с 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>
  );
}


 

Здесь я использую scss и импортирую bootstrap scss style.scss и импортирую App.js

 @import "~bootstrap/scss/bootstrap";
 

Отсутствует ли какая-либо зависимость для добавления?

ССЫЛКА НА CODESANDBOX

Поскольку вы используете только bootstrap , вам нужно самостоятельно обрабатывать Carousel состояние.

Вы можете попробовать использовать useState для обработки выбранного изображения, как показано ниже. Вы можете условно задать button image class имена элементов и, чтобы получить правильное CSS применение.

Я также использовал classnames package для правильной настройки имен классов.

Решение 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

Решение 2

Вы можете включить пакет JS и CSS, приведенный в документации.

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