I am in the process of designing a portfolio website and have encountered a challenge. I want to divide it into two sections - a brief introduction and a carousel for showcasing projects. While I have managed to set up both sections, I'm facing an issue with the carousel not switching to the next item properly. Upon clicking the next/prev icons, the text shifts down briefly but then remains stuck on the first slide without responding further.
Additionally, I've noticed a change in my address bar from "LocalHost/src/index.html#" to "LocalHost/src/index.html#myCarousel" after clicking on an indicator. I'm unsure if this detail is relevant, but any insights would be appreciated.
Despite following tutorials on Bootstrap diligently, I can't seem to pinpoint why this problem persists. Any assistance or guidance on resolving this issue would be highly valued!
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap & other CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="./index.css">
<title>Attempted Portfolio</title>
</head>
<body>
<div class="intro-container">
<div class="container">
<h1>
My Name The
<span class="txt-type" data-wait="3000" data-words ='["Developer", "Designer", "Creator"]'></span>
</h1>
<h2>Welcome to my website</h2>
</div>
</div>
<!-- Carousel -->
<div id="myCarousel" class="carousel slide"
data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel"
data-slide-to="0" class="active"></li>
<li data-target="#myCarousel"
data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container">
<h1>First Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Luctus venenatis lectus magna fringilla urna. Libero
nunc consequat interdum varius. Egestas diam in arcu cursus
euismod quis viverra. Nunc id cursus metus aliquam eleifend
mi in.</p>
</div>
</div>
<div class="carousel-item">
<div class="container">
<h1>Second Headline</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Luctus venenatis lectus magna fringilla urna. Libero
nunc consequat interdum varius. Egestas diam in arcu cursus
euismod quis viverra. Nunc id cursus metus aliquam eleifend
mi in.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="app.js"></script>
</body>
</html>
index.css
@import url('https://fonts.googleapis.com/css?family=Raleway:200,100,400');
body {
font-family: 'Raleway', sans-serif;
height: 100vh;
color: #fff5f7;
overflow: scroll;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 0 3rem;
}
.intro-container {
background: #ffb7c5;
color: #fff8b7;
height: 100vh;
}
.carousel-item {
background-color: #fff0f2;
color: #ffb7c5;
height: 100vh;
}
h1, h2 {
font-weight: 200;
margin: 0.4rem;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.5rem;
}
/* Cursor Animation */
.txt-type > .txt {
border-right: 0.2rem solid #fff5f7;
}
@media(min-width: 1200px) {
h1 {
font-size: 3rem;
}
}
@media(max-width: 800px) {
.container {
padding: 0 1rem;
}
h1 {
font-size: 1.5rem;
}
}
@media(max-width: 500px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1rem;
}
}