React bootstrap Carousel 無法正常工作

Question

我是使用 React Bootstrap 的新手，我正在嘗試使用 Carousel，但是它給了我最后一張幻燈片在更改幻燈片時消失的錯誤：

我在這里滑動，發生了這種情況，幻燈片也被延遲了，這是我的代碼：

import React from "react";
import {Carousel} from "react-bootstrap";
import perro from "../perro.jpg";
const CarouselContainer = props => {
    return (
        <Carousel>
            <Carousel.Item>
                <img
                className="d-block w-100"   
                src={perro}
                alt="First slide"
                />
                <Carousel.Caption>
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <img
                className="d-block w-100"
                src={perro}
                alt="Second slide"
                />
                <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
        </Carousel>
    );
}

Answer 1

在頁面中導入bootstrap CSS，然后就可以了。

import 'bootstrap/dist/css/bootstrap.min.css';

Answer 2

我不確定這個答案是否會對您有所幫助，但我對 react bootstrap 有同樣的問題，並且當輪播內的元素具有 flex 顯示時，錯誤出現在我的 css 中。 由於任何原因，該屬性會在滾動效果之前導致該空白幻燈片。 如果這不能解決問題，您可以嘗試將 react-bootstrap carousel 更改為唯一的bootstrap carousel 。

首先在 index.html 中導入bootstrap.bundle.min.js腳本：

<script async src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

請注意，此引導腳本適用於 5.1 版本，因此如果您使用其他版本，只需在該版本的文檔中搜索該腳本即可。

然后，將 bootstrap carousel 放入組件中，並記住 flex 顯示會導致錯誤。

我希望我有所幫助。 抱歉，如果不清楚，但這是我第一次在這里回答：D

Answer 3

當我將自己的指標添加到輪播時，這也發生在我身上。 我還有一個動態的項目數組，必須在輪播中呈現。 似乎由於某種原因它也發生在你身上。 就我而言，react-bootstrap 的輪播在滑動時超出了項目列表。 我使用 Carousel 組件的 activeIndex 和 onSelect 屬性控制滑動。

在你的情況下，你可以嘗試這樣的事情：

import React from "react";
import {Carousel} from "react-bootstrap";
import perro from "../perro.jpg";

function CarouselContainer() {
  //critical to set initial state to zero
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    //adjust index to 0 if greater than index of last slide or less than zero
    //slide indexes are zero-based so yourLasSlideIndex would be 1 I guess
    if (selectedIndex >= yourLastSlideIndex+1 || selectedIndex < 0 ){
            this.setIndex(0);
        } else if (selectedIndex !== index) {
            setIndex(selectedIndex);
        }
  };

  return (
    <Carousel activeIndex={index} onSelect={handleSelect}>
      <Carousel.Item>
                <img
                className="d-block w-100"   
                src={perro}
                alt="First slide"
                />
                <Carousel.Caption>
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
                </Carousel.Caption>
            </Carousel.Item>
            <Carousel.Item>
                <img
                className="d-block w-100"
                src={perro}
                alt="Second slide"
                />
                <Carousel.Caption>
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </Carousel.Caption>
            </Carousel.Item>
    </Carousel>
  );
}

render(<CarouselContainer />);

您也可以使用 onSlid 或 onSlide 回調屬性來控制它，但不確定。