.image-slider { overflow: hidden; height: 100dvh; width: 100vw; max-width: 100%; } .slider-image-container { height: 100%; min-width: 100%; display: flex; flex-direction: row; transition: all 0.5s ease-in-out; } .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; background: #000000aa; border-radius: 20px; padding: 2px; stroke: white; } .slider-btn-left { left: 10px; } .slider-btn-right { right: 10px; } .slider-image { display: block; flex: 0 0 100vw; max-width: 100vw; height: auto !important; object-fit: cover; } .dots-contain { display: flex; flex-direction: row; justify-content: center; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: #000000aa; border-radius: 20px; } .slider-dot { cursor: pointer; transform: scale(1.5); stroke: white; }