(Please note that I am a student and still learning, so gentlemen, please don't be upset with the question. Thank you.)
In short:
I have integrated the Bootstrap v4 carousel (https://getbootstrap.com/docs/4.0/components/carousel/) into the header of my website and it works great, but the carousel disappears after the first slide.
I tried removing the container class, thinking it might conflict with the carousel position, but it didn't help.
(I searched on Bootstrap, on Stack Overflow, nothing :( )
Designers, could you please assist me?
Thank you in advance.
P.S. The images are of the same size.
https://i.sstatic.net/Dufb0.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=noS">
<title>Home</title>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet"gt;;
<!-- Custom styles for this template -->
<link href="css/business-frontpage.css" rel="stylesheet";>
<!-- Latest compiled and minified CSS -->
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">;
<l챕nk href="https://fonts.googleapis.com/css2?family=Italianno&display=swap" rel="stylesheet";>;
</head>;
<body>;
<<!-- Navigation -->>;
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">;
<div class="container">;
<a class="navbar-brand" href="#">Welcome </a>;
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">;
<span class="navbar-toggler-icon"></span>;
</button>;
<div class="collapse navbar-collapse" id="navbarResponsive">;
<ul class="navbar-nav ml-auto">;
<li class="nav-item active">;
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>;
</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Text</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Text</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Service</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Text</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Text</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Text</a>;
</li>;
<li class="nav-item">;
<a class="nav-link" href="#">Contact</a>;
</li>;
</ul>;
</div>;
</div>;
<form class="form-inline my-2 my-lg-0">;
<a class="nav-link" href="#">ENG</a>;
<a class="nav-link" href="#">GER</a>;
<a class="nav-link" href="#">FR</a>;
</form>;
</nav>;
<!-- Header -->>;
<!-- carousel -->>;
<header class="bg-primary bg-dark py-3 mb-5">;
<div class="container h-100"> ;;
<div id="carousel" class="carousel slide" data-ride="carousel">;
<ol class="carousel-indicators"> ;
<li data-target="#carousel" data-slide-to="0" class="active"></li>;
<li data-target="#carousel" data-slide-to="1"></li>;
</ol>;
<div class="carousel-inner">;
<div class="carousel-item active">;
<img src="1.jpg" class="img-fluid">;
<div class="carousel-item">;
<img src="11.jpg" class="img-fluid">;
</div>;
</div>;
<a class="left carousel-control" href="carousel" data-slide="prev">;
<span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right">
</span></a>;
</div>;
<div class="main-text hidden-xs">;
<div class="col-md-12">;
<p class="h1"><span><b>text</b></span></p><h1 class="text-white"><span><b>      text</b></span></h1></b>;
</div>;
</div>;
</header>;
<!-- carousel -->>;;