旋转木马引导程序不能作为幻灯片工作

Question

我已经使用react库react-bootstrap Carousel.js编写了一个Portfolio.js文件来创建一个不受控制的轮播。我的代码垂直显示幻灯片，而不是切换为Carousel，https://react-bootstrap.github.io/components/carousel/。我的旋转木马行为不起作用

发布以下代码：https://codesandbox.io/s/stoic-beaver-6j1ie?file=/src/component/Project.js

import React, { Component } from "react";
import TextBlock from "./TextBlock";
import "../styles/Styles.css";
import { Row, Col, Carousel } from "react-bootstrap";
import ModalItem from "./ModalItem.js";
import model from "../assets/img/portfolio/3d-tool.PNG";
import portfolio from "../assets/img/portfolio/download.svg";
import americanDream from "../assets/img/portfolio/download.jpg";
import PrevButton from "../assets/img/PrevButton.svg";
import NextButton from "../assets/img/NextButton.svg";
import features from "../assets/img/portfolio/model.gif";
import photo from "../assets/img/portfolio/portfolio.gif";
import styled from "styled-components";
// import 'bootstrap/dist/css/bootstrap.min.css';

const StyledCarousel = styled(Carousel)`
  .carousel-control-prev-icon {
    background-image: url(${PrevButton});
  }
  .carousel-control-next-icon {
    background-image: url(${NextButton});
  }
  .carousel-control-prev-icon,
  .carousel-control-next-icon {
    width: 2em;
    height: 2em;
  }
  .carousel-control-next,
  .carousel-control-prev {
    top: 40%;
    bottom: auto;
    z-index: 20;
  }
`;

class Portfolios extends Component {
  state = {
    modals: [
      {
        id: 1,
        open: false
      },
      {
        id: 2,
        open: false
      },
      {
        id: 3,
        open: false
      }
    ]
  };
  onOpenModal = (id) => {
    this.setState({
      modals: this.state.modals.map((item) => {
        if (item.id === id) {
          item.open = true;
        }
        return item;
      })
    });
  };
  onCloseModal = (id) => {
    this.setState({
      modals: this.state.modals.map((item) => {
        if (item.id === id) {
          item.open = false;
        }
        return item;
      })
    });
  };
  getOpen = (id) => {
    const open = this.state.modals;
    return open[id - 1].open;
  };
  render() {
    return (
      <section id="portfolio">
        <div className="content">
          <h2>MY PROJECTS</h2>
          <div id="Projects" className="Projects">
            <Row className="no-gutters" data-aos="fade-up" data-aos-delay="100">
              <Col sm={12}>
                <TextBlock title="Go over some projects I have worked on">
                  <div style={{ paddingTop: "0.5em" }}>
                    <Carousel>
                      <Carousel.Item>
                        <img
                          className="d-block"
                          src={model}
                          width="70%"
                          alt="First slide"
                        />
                        <Carousel.Caption>
                          <h3>3D Construction Tool</h3>
                          <p>
                            A React website to render 3D model in astronomy,
                            built with React front-end, Node server, WebGL,
                            Google Cloud Platform and Neural Network
                            <br />
                            <button
                              className="Styled-Button"
                              onClick={() => {
                                this.onOpenModal(1);
                              }}
                            >
                              Details
                            </button>
                            <a
                              className="Styled-Button"
                              href="https://github.com/tuyenphk/3D-RECONSTRUCTION-TOOL"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              Code
                            </a>
                          </p>
                        </Carousel.Caption>
                      </Carousel.Item>
                      <Carousel.Item>
                        <img
                          className="d-block"
                          src={portfolio}
                          width="70%"
                          alt="Third slide"
                        />
                        <Carousel.Caption>
                          <h3>Portfolio Website</h3>
                          <p>
                            My personal portfolio responsive website, built with
                            React to let viewers get to know a little bit more
                            about me, my projects and my designs
                            <br />
                            <button
                              className="Styled-Button"
                              onClick={() => {
                                this.onOpenModal(2);
                              }}
                            >
                              Details
                            </button>
                            <a
                              className="Styled-Button"
                              href="https://github.com/tuyenphk/porfolio-website"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              Code
                            </a>
                          </p>
                        </Carousel.Caption>
                      </Carousel.Item>

                      <Carousel.Item>
                        <img
                          className="d-block"
                          src={americanDream}
                          width="70%"
                          alt="Third slide"
                        />
                        <Carousel.Caption>
                          <h3>American Dream</h3>
                          <p>
                            My first web application project
                            <br />
                            <a
                              className="Styled-Button"
                              href="http://cis-linux2.temple.edu:8080/SP20_3308_tuh39709/#/home"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              Live
                            </a>
                            <a
                              className="Styled-Button"
                              href="https://github.com/tuyenphk/Pham_web"
                              target="_blank"
                              rel="noopener noreferrer"
                            >
                              Code
                            </a>
                          </p>
                        </Carousel.Caption>
                      </Carousel.Item>
                    </Carousel>

                    <ModalItem
                      isOpen={this.getOpen(1)}
                      onClose={() => {
                        this.onCloseModal(1);
                      }}
                    >
                      <TextBlock title="3D Reconstruction Tool">
                        <Row className="no-gutters">
                          <Col md={7}>
                            <p>
                              3D-Reconstruction Tool is a fun, enjoyable, and
                              informative web application designed for
                              experimentation, research, and casual learning.
                              The application's cloud-hosted neural network
                              offers symmetry detection services for
                              2-dimensional astronomy images, and reproduces
                              them in a 3-dimensional format. Cloud-based
                              machine learning has rapidly evolved into a vital
                              and sophisticated aspect of modern software
                              development. The goal of the 3D Reconstruction
                              Tool aims to explore and transform these
                              components into an entertaining, informative
                              platform.
                            </p>
                          </Col>
                          <Col md={5}>
                            <figure
                              style={{ maxWidth: "280px", textAlign: "center" }}
                            >
                              <img
                                src={features}
                                alt="3d demo"
                                style={{ maxWidth: "100%", height: "auto" }}
                              ></img>
                              <figcaption style={{ textAlign: "center" }}>
                                <i>3D Reconstruction Tool's chatbot feature</i>
                              </figcaption>
                            </figure>
                          </Col>
                        </Row>
                        <Row>
                          <Col>
                            <h2>
                              <b>
                                Features: Web application is built by React
                                Hook, instantiated Nodejs, serviced on Google
                                Compute Engine with some features
                              </b>
                            </h2>
                            <ul
                              style={{
                                paddingLeft: "1.1em",
                                textAlign: "left"
                              }}
                            >
                              <li>
                                There are 4 tabs: Home, Modelling, Resource,
                                Team to navigate.
                              </li>
                              <li>
                                Upload functionality & sent to Google Cloud
                                Storage bucket.
                              </li>
                              <li>Render button for modelling 3D model.</li>
                              <li>
                                Utilize the ‘Search’ functions to find 2D
                                images.
                              </li>
                              <li>
                                Ability to search, obtain, and display their
                                rendered images
                              </li>
                            </ul>
                            <h2>
                              <b>Technologies used:</b>
                            </h2>
                            <p>
                              React, React Hook, WebGL, Three.js, Node, Express,
                              Google Cloud Platform, Neraul-Network
                            </p>
                            <p>
                              <em>
                                Special thanks to my collaborators: Khai Nguyen,
                                Elizaveta Lizaibeme, and Lauren Kimpel from
                                Temple University's Class of 2020!
                              </em>
                            </p>
                          </Col>
                        </Row>
                      </TextBlock>
                    </ModalItem>

                    <ModalItem
                      isOpen={this.getOpen(2)}
                      onClose={() => {
                        this.onCloseModal(2);
                      }}
                    >
                      <TextBlock title="Portfolio Website">
                        <Row className="no-gutters">
                          <Col md={7}>
                            <p>
                              My personal portfolio responsive website, built
                              with React to showcase my projects, my photoshop
                              designs and let viewers get to know a little bit
                              more about me.
                            </p>
                          </Col>
                          <Col md={5}>
                            <figure
                              style={{ maxWidth: "280px", textAlign: "center" }}
                            >
                              <img
                                src={photo}
                                alt="3d demo"
                                style={{ maxWidth: "100%", height: "auto" }}
                              ></img>
                              <figcaption style={{ textAlign: "center" }}>
                                <i>Portfolio's chatbot feature</i>
                              </figcaption>
                            </figure>
                          </Col>
                        </Row>
                        <Row>
                          <Col>
                            <h2>
                              <b>Features:</b>
                            </h2>
                            <ul
                              style={{
                                paddingLeft: "1.1em",
                                textAlign: "left"
                              }}
                            >
                              <li>Display the home page.</li>
                              <li>
                                Describe about myself to let employers
                                understand me.
                              </li>
                              <li>
                                More details about projects I have worked on.
                              </li>
                              <li>
                                Display some designs I have experienced in
                                Illustrator, Photoshop, and Indesign.
                              </li>
                              <li>
                                A contact form for employers get in touch with
                                me.
                              </li>
                            </ul>
                            <h2>
                              <b>Technologies used:</b>
                            </h2>
                            <p>React, Firebase-hosting, Formspree</p>
                          </Col>
                        </Row>
                      </TextBlock>
                    </ModalItem>
                  </div>
                </TextBlock>
              </Col>
            </Row>
          </div>
        </div>
      </section>
    );
  }
}

export default Portfolios;

有没有人能花点时间帮我一下？我真的很欣赏它！

Answer 1

我找到了我的答案here

将其添加到公共文件夹下的index.html (用于react应用程序)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">