React Bootstrap Carousel无法切换，图片垂直堆叠问题求助

Problem Description #

I'm trying to create a simple uncontrolled carousel using react-bootstrap, following the official docs. However, when I run the code, the images are stacked vertically and there's no sliding effect. Here's my code:

import React from 'react'; 
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png'; 
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png'; 
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png'; 
import Carousel4 from import Carousel from 'react-bootstrap/lib/Carousel'; 

const Core = () => ( 
  <main className="core"> 
    <article className="left"> 
      <Carousel> 
        <Carousel.Item> 
          <img src={Carousel1} alt=""/> 
        </Carousel.Item> 
        <Carousel.Item> 
          <img src={Carousel2} alt=""/> 
        </Carousel.Item> 
        <Carousel.Item> 
          <img src={Carousel3} alt=""/> 
        </Carousel.Item> 
      </Carousel> 
    </article> 
    <article className="right"></article> 
  </main> 
); 

export default Core 

Solution #

Let's break down the issues and fix them step by step:

1. Fix Syntax Error in Imports #

Your code has a broken import line that's causing a syntax error right off the bat:

import Carousel4 from import Carousel from 'react-bootstrap/lib/Carousel'; 

This line incorrectly combines two separate imports. If you meant to import a fourth carousel image, split it into its own line. If not, just remove the incomplete Carousel4 import entirely. Here's the corrected import section:

import React from 'react'; 
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png'; 
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png'; 
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png'; 
// Uncomment below if you need the fourth image
// import Carousel4 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-04.png'; 
import Carousel from 'react-bootstrap/Carousel'; // Updated to modern import path

2. Add Bootstrap CSS (Critical for Carousel Functionality) #

The biggest reason your carousel is just stacking images is missing Bootstrap CSS. React-Bootstrap components don't include styling out of the box—they rely on Bootstrap's core styles to handle layout, transitions, and interactive behavior like sliding.

You can add it in one of two easy ways:

• Import in your React entry file: In your project's root index.js or App.js, add this line:

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

• Add via HTML link: In your public/index.html file, insert this in the <head> section:

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
  

3. Polish Image Styling (Optional but Recommended) #

While your basic carousel structure is correct, adding a couple of Bootstrap classes to your images will ensure they fit the carousel container properly. Here's the fully fixed component code:

import React from 'react'; 
import Carousel1 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-01.png'; 
import Carousel2 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-02.png'; 
import Carousel3 from '../../../assets/FootTheBall_SignUpScreen_CarouselImage-03.png'; 
import Carousel from 'react-bootstrap/Carousel'; 
import 'bootstrap/dist/css/bootstrap.min.css'; // Alternatively import in root file

const Core = () => ( 
  <main className="core"> 
    <article className="left"> 
      <Carousel> 
        <Carousel.Item> 
          <img 
            className="d-block w-100" // Ensures image fills carousel container
            src={Carousel1} 
            alt="First carousel slide" 
          />
        </Carousel.Item> 
        <Carousel.Item> 
          <img 
            className="d-block w-100"
            src={Carousel2} 
            alt="Second carousel slide" 
          />
        </Carousel.Item> 
        <Carousel.Item> 
          <img 
            className="d-block w-100"
            src={Carousel3} 
            alt="Third carousel slide" 
          />
        </Carousel.Item> 
      </Carousel> 
    </article> 
    <article className="right"></article> 
  </main> 
); 

export default Core 

After making these changes, your carousel should display correctly with sliding effects and proper horizontal layout.

内容的提问来源于stack exchange，提问作者Melissa Stewart