.carousel { position: relative; /*max-width: 1000px; */ margin: auto; overflow: hidden; } .carousel-inner { display: flex; transition: transform 0.5s ease; } .carousel-item { min-width: 100%; box-sizing: border-box; } .carousel-item img { width: 100%; display: block; border-radius: 8px; } button.prev, button.next { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #fff; border: none; padding: 10px 15px; cursor: pointer; border-radius: 50%; font-size: 2rem; } button.prev { left: 10px; } button.next { right: 10px; } button:hover { background-color: rgba(0,0,0,0.8); }