#carousel-container {width: 100%; height: 480px; position: relative; overflow: hidden; } .carousel-slide {width: 100%; min-height: 480px; position: absolute; top: 0; left: 0; display: none; transition: opacity .5s ease; } .carousel-slide.active {opacity: 1; pointer-events: all; } .carousel-slide img, .carousel-slide video {height: 480px; width: auto; max-width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: contain; } .carousel-slide img {width: auto; height: 100%; max-width: 100%; /*display: block;*/ /*margin: 0 auto;*/ } .carousel-arrows {width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; } #arrow-prev, #arrow-next {font-size: 48px; color: #fff; padding: 10px 20px; cursor: pointer; pointer-events: all; user-select: none; background: rgba(0,0,0,.3); border-radius: 10px; transition: .2s; } #arrow-prev:hover, #arrow-next:hover {background: rgba(0,0,0,.5); }