react bootstrap Carousel.js

我已经使用react library react bootstrap Carousel.js编写了一个简单的.js文件来创建一个不受控制的旋转木马，但是图像不是以幻灯片的形式出现，而是一个接一个地垂直出现。在下面发布代码。你能帮我调试一下吗

App.jsx
-----------

import React, { Component } from 'react';

import './App.css';

import writing from './writing.jpg' ;
import grammer from './grammer.jpg' ;
import listening from './listening.jpg' ;
import reading from './reading.jpg' ;

import {Carousel}  from 'react-bootstrap';

class App extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      index: 0,
      direction: null
    };
    }

  render() {
    const { index, direction } = this.state;
    return (

          <Carousel controls={false} >

          <Carousel.Item >

             <img src={grammer} alt="grammer" width={300} height={100} />
          </Carousel.Item>

          <Carousel.Item>
             <img src={listening} alt="listen" width={300} height={100} />
          </Carousel.Item>


          <Carousel.Item>
             <img width={300} height={100} alt="reading" src={reading} />

          </Carousel.Item>

              <Carousel.Item>
             <img width={300} height={100} alt="reading" src={writing} />

          </Carousel.Item>

          </Carousel>

    );
  }
}

export default App;



Index.js
----------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';


ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();


and under index.html I have element below:

 <div id="root"></div>

App.jsx
-----------
从“React”导入React，{Component}；
导入“/App.css”；
从“/writing.jpg”导入写入；
从“./grammer.jpg”导入语法；
从“./listing.jpg”导入侦听；
从“/reading.jpg”导入读取；
从“react bootstrap”导入{Carousel}；
类应用程序扩展组件{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
索引：0，
方向：空
};
}
render（）{
const{index，direction}=this.state；
返回(
);
}
}
导出默认应用程序；
Index.js
----------
从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
ReactDOM.render（，document.getElementById（'root'））；
registerServiceWorker（）；
在index.html下，我有以下元素：

---

因此，运行此代码后，图像将加载到页面，但旋转木马行为不起作用

就在今天，我遇到了同样的问题，我看到了这篇没有回复的帖子，所以我想写下我是如何解决问题的是一个好主意：

在我的例子中，旋转木马图像是垂直对齐的，因为我没有正确地包含引导样式表。以下是我遵循的步骤：

1.转到

2.找到最新的样式表并将其复制到剪贴板。迄今为止的最新版本包括：

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

3。将它们粘贴到

index.html

文件的

部分中。现在，如果您保存所有内容并重新加载您的react应用程序，它应该会很好

希望这将有助于任何人有同样的问题
 使用
bootstrap-4-react
供参考，您不需要自己添加CSS文件