The hitboxes of the previous and next buttons are visually hidden. Additionally, the indicators at the bottom appear strange, and the sliding animation is not as smooth as expected.
Despite searching extensively and trying various solutions, I am still unsure about the issue. Any assistance in resolving this matter would be greatly appreciated.
h1 {
text-align: center;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 50px;
}
.row {
height: 120px;
}
.text-container {
padding-top: 56px;
}
.c-item {
height: 500px;
}
.c-image {
height: 100%;
object-fit: cover;
filter: brightness(0.6);
}<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8>
<meta name="viewport" content="width=device-width, initial-scale=1.0>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfbdb0b0abacabadbeaf9febf1ecf1ee">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous>
<link rel="stylesheet" href="css/stylesheet.css>
<title>Home>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c0a2afafb4b3b4b2a1b080f5eef2eef2">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous></script>
<div>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top>
<div class="container>
<a class="navbar-brand mb-0 h1" href="#">Miltons Hotel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" class="navbar-toggler" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
<span class="navbar-toggler-icon"></span>
Menu
</button>
<div class="collapse navbar-collapse" id="navbarNav>
<ul class="navbar-nav>
<li class="nav-item active>
<a href="index.html class="nav-link>Home</a>
</li>
<li class="nav-item">
<a href="Impressum.html class="nav-link">Impressum</a>
</li>
<li class="nav-item">
<a href="Hilfe.html class="nav-link">Help</a>
</li>
<li class="nav-item dropdown>
<a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button>
Login
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown>
<li>
<a href="Loginuser.html" class="dropdown-item>Login</a>
</li>
<li>
<a href="Registrierung.html class="dropdown-item>Sign Up</a>
</li>
</ul>
</ul>
<div class="ml-auto></div>
<form class="d-flex>
<input type="text" class="form-control me-2>
<button type="submit" class="btn btn-primary>
Search
</button>
</form>
</div>
</div>
</nav>
<div id="slider" class="carousel slide text-container" data-bs-ride="carousel>
<div class="carousel-indicators>
<button type="button" data-bs-target="#slider" data-bs-slide-to="0 class="active" aria-current="true" aria-label="Slide 1></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="1" aria-label="Slide 2></button>
<button type="button" data-bs-target="#slider" data-bs-slide-to="2" aria-label="Slide 3></button>
</div>
<div class="carousel-inner>
<div class="carousel-item active c-item>
<img src="img/carousel1.jpg" class="d-block w-100 c-image" alt="Slide 1>
</div>
<div class="carousel-item c-item>
<img src="img/carousel2.jpg" class="d-block w-100 c-image" alt="Slide 2>
</div>
<div class="carousel-item c-item>
<img src="img/carousel3.jpg" class="d-block w-100 c-image" alt="Slide 3>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#slider" data-bs-slide="prev>
<span class="carousel-control-prev-icon" aria-hidden="true></span>
<span class="visually-hidden">Previous>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#slider" data-bs-slide="next>
<span class="carousel-control-next-icon" aria-hidden="true></span>
<span class="visually-hidden">Next>
</button>
</div>
<div class="container text-container>
<div class="row>
<div class="col-12>
<h1>Milton Hotels</h1>
</div>
</div>
</div>
</div>
</body>
</html>