I have written a Portfolio.js file using react library react-bootstrap Carousel.js to create an uncontrolled carousel. My code displays the slides in vertical instead of switching as Carousel, https://react-bootstrap.github.io/components/carousel/. My carousel behavior does not work
Posting the code below: 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
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
