I am basically trying to recreate a bootstrap carousel with indicators but in my code I cannot see the indicators and the previous/next buttons don’t work. I have found an alternate solution that I could adapt here but I would like to understand where mine goes wrong, as it’s pretty much copy-pasted from Bootstrap’s site. HTML and CSS Below:
/* Define our custom colors */
:root{
--livingcoral: #FC766AFF;
--stormgray: #B0B8B4FF;
--forestbiome: #184A45FF;
--sagegreen: #567572FF;
--marsala: #964F4CFF;
--granitegray: #696667FF;
--blacksteel: #080706;
--paper: #EFEFEF;
--goldleaf: #D1B280;
--silver: #594D46;
}
/* Boilerplate CSS for box sizing and body */
* {
box-sizing: border-box;
}
body{
background-color: var(--paper);
font-family: Georgia, Times, Courier;
color: var(--blacksteel);
}
/* Top Bar including opacity transition */
#welcome {
color: var(--paper);
text-align: center;
background-color: var(--blacksteel);
font-family: Courier, Times, Georgia;
transition: opacity 0.5s;
cursor: default;
/* background-image: url("BlueBuilding.jpg") */
}
#welcome:hover{
opacity: 0.7;
}
/* Top left personal quote, including transition when hovering */
#top-left-motivation{
text-align: left;
color: var(--silver);
overflow: hidden;
cursor: default;
}
.quote, .text {
display: block;
overflow: hidden;
transition: opacity 0.8s ease-in-out;
}
.quote{
height: auto;
width: auto;
opacity: 1;
}
.text{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .quote{
height: 0;
width: 0;
opacity: 0;
}
#top-left-motivation:hover .text{
height: auto;
width: auto;
opacity: 1;
font-style: italic;
}
/* Top right list including link hover effects */
#top-right-list{
text-align: right;
font-family: Georgia;
}
.list-inline-item{
text-align: right;
margin-left: 15px;
}
.info-link{
color: var(--silver);
transition: color 0.3s, border 0.3s, padding 0.3s;
}
.info-link:link { text-decoration: none; }
.info-link:visited { text-decoration: none; }
.info-link:hover {
color: var(--goldleaf);
text-decoration: none;
cursor: pointer;
border-top: 1px solid var(--goldleaf);
border-bottom: 1px solid var(--goldleaf);
/* background-color: lightskyblue; */
/* border-radius: 2px; */
padding: 4px 5px 5px 5px;
}
.info-link:active {
text-decoration: none;
color: brown;
}
/* personalt statement formatting */
#personal-statement{
text-align: center;
font-family: Georgia;
/* color: #327c9c; */
}
#maincarousel{
margin: 100px 100px 100px 100px;
padding: 50px 50px 50px 50px;
background-color: var(--silver);
border-radius: 5px;
color: var(--paper);
}
/* Special thanks to W3Schools for the
timeline tutorial: https://www.w3schools.com/howto/howto_css_timeline.asp */
/* Container around content */
.timeline {
position: relative;
max-width: 1400px;
margin: 0 auto;
}
/* Uncomment if you want the circles on the timeline */
.timeline::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background-color: var(--paper);
border: 2px solid var(--blacksteel);
border-radius: 50%;
z-index: 2;
left: calc(50% - 7px);
top: 0;
}
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: var(--blacksteel);
top: 2px;
bottom: 0px;
left: 50%;
}
.container-timeline {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* For Javascript to hide/reveal elements on scroll */
.container-timeline {
visibility: hidden;
opacity: 0;
transition: all 0.5s ease-in-out;
}
.container-timeline.show{
transform: none;
visibility: visible;
opacity: 1;
}
.left-side {
left: 0;
}
.right-side {
left: 50%;
text-align: right;
}
/* Add lines to the left container (pointing right) */
.left-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
right: 0px;
background: var(--blacksteel);
}
/* Add lines to the right container (pointing left) */
.right-side::before {
content: " ";
height: 2px;
position: absolute;
top: 30px;
width: 40px;
z-index: 1;
left: 0px;
background: var(--blacksteel);
}
/* Fix the circle for containers on the right side */
.right-side::after {
left: -9px;
}
/* The actual content */
.content-timeline {
padding: 20px 30px;
position: relative;
border-radius: 6px;
border: 1px solid var(--blacksteel);
}
.left-side .content-timeline {
background: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .content-timeline {
background: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
/* format the timeline boxes */
.timeline-heading{
color: var(--paper);
font-family: Courier;
}
.left-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(225deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.right-side .timeline-heading{
border-image-slice: 1;
border-bottom: 1px solid;
border-image-source: linear-gradient(45deg, rgba(209,178,128,1) 0%, rgba(89,77,70,1) 51%, rgba(8,7,6,1) 100%);
}
.timeline-text{
color: var(--paper);
font-family: Georgia;
text-decoration: bold;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 25px;
}
.timeline::before {
left: 18px;
}
/* Full-width containers */
.container-timeline {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Make sure that all lines are pointing leftwards */
.container-timeline::before {
left: 30px;
}
/* Make sure all circles are at the same spot */
.left-side::after, .right-side::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right-side {
left: 0%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="styles.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>work exp.</title>
</head>
<body class="workexp">
<h1 id="welcome">
Work experience.
</h1>
<div class="container-fluid" id="head">
<div class="row justify-content-md-center">
<div class="col" id="top-left-motivation">
<span class="quote">Personal Quote.</span>
<span class="text">Transition text</span>
</div>
<div class="col" id="top-right-list">
<ul class="list-inline">
<li class="list-inline-item"><a class="info-link" href="index.html" class="">Home.</a></li>
<li class="list-inline-item"><a class="info-link" href="aboutme.html">About me.</a></li>
<li class="list-inline-item"><a class="info-link" href="contact.html">Contact.</a></li>
</ul>
</div>
</div>
</div>
<div id="maincarousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#maincarousel" data-slide-to="0" class="active"></li>
<li data-target="#maincarousel" data-slide-to="1" class=""></li>
<li data-target="#maincarousel" data-slide-to="2" class=""></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active text-center p-4">
<p>lorem ipsum (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
<div class="carousel-item text-center p-4">
<p>lorem ipsum v2 (imagine longer text)</p>
</div>
</div>
<a class="carousel-control-prev" href="#maincarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
<a class="carousel-control-next" href="#maincarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only"></span>
</a>
</div>
</body>
</html>
Also JSfiddle here https://jsfiddle.net/j9skLwye/2/
Any help appreciated.