You can see the "visually hidden" hit boxes of the previous and next buttons. Also, the indicators on the bottom look really weird. And it doesn't slide as smoothly as it should.
I looked everywhere and tried everything I could, but im just out of ideas what it could be. So if someone could please help me, I would be delighted.
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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/stylesheet.css">
<title>Home</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div>
<nav >
<div >
<a href="#">Miltons Hotel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
<span ></span>
Menu
</button>
<div id="navbarNav">
<ul >
<li >
<a href="index.html" >Home</a>
</li>
<li >
<a href="Impressum.html" >Impressum</a>
</li>
<li >
<a href="Hilfe.html" >Help</a>
</li>
<li >
<a href="#" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button">
Login
</a>
<ul aria-labelledby="navbarDropdown">
<li>
<a href="Loginuser.html" >Login</a>
</li>
<li>
<a href="Registrierung.html" >Sign Up</a>
</li>
</ul>
</ul>
<div ></div>
<form >
<input type="text" >
<button type="submit" >
Search
</button>
</form>
</div>
</div>
</nav>
<div id="slider" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#slider" data-bs-slide-to="0" 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 >
<div >
<img src="img/carousel1.jpg" alt="Slide 1">
</div>
<div >
<img src="img/carousel2.jpg" alt="Slide 2">
</div>
<div >
<img src="img/carousel3.jpg" alt="Slide 3">
</div>
</div>
<button type="button" data-bs-target="#slider" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#slider" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
<div >
<div >
<div >
<h1>Milton Hotels</h1>
</div>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
The problem is that you included Bootstrap CSS v4.3.1 and Bootstrap JS v5.2.2.
Change Bootstrap CSS from v4.3.1 to v5.2.2.
See the snippet below.
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 href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="css/stylesheet.css">
<title>Home</title>
</head>
<body>
<div>
<nav >
<div >
<a href="#">Miltons Hotel</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="toggle-navigation">
<span ></span>
Menu
</button>
<div id="navbarNav">
<ul >
<li >
<a href="index.html" >Home</a>
</li>
<li >
<a href="Impressum.html" >Impressum</a>
</li>
<li >
<a href="Hilfe.html" >Help</a>
</li>
<li >
<a href="#" id="navbarDropdown" data-bs-toggle="dropdown" aria-expanded="false" role="button">
Login
</a>
<ul aria-labelledby="navbarDropdown">
<li>
<a href="Loginuser.html" >Login</a>
</li>
<li>
<a href="Registrierung.html" >Sign Up</a>
</li>
</ul>
</ul>
<div ></div>
<form >
<input type="text" >
<button type="submit" >
Search
</button>
</form>
</div>
</div>
</nav>
<div id="slider" data-bs-ride="carousel">
<div >
<button type="button" data-bs-target="#slider" data-bs-slide-to="0" 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 >
<div >
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" alt="Slide 1">
</div>
<div >
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" alt="Slide 2">
</div>
<div >
<img src="https://static01.nyt.com/images/2021/04/03/multimedia/03xp-april/merlin_185893383_8e41433f-4a32-4b1e-bf02-457290d0d534-superJumbo.jpg" alt="Slide 3">
</div>
</div>
<button type="button" data-bs-target="#slider" data-bs-slide="prev">
<span aria-hidden="true"></span>
<span >Previous</span>
</button>
<button type="button" data-bs-target="#slider" data-bs-slide="next">
<span aria-hidden="true"></span>
<span >Next</span>
</button>
</div>
<div >
<div >
<div >
<h1>Milton Hotels</h1>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>