.carousel{position:relative;width:100%;margin:auto;overflow:hidden;border:1px solid #ddd}.carousel-slides{display:flex;transition:transform .5s ease-in-out}.carousel-slide{min-width:100%;transition:all .5s ease-in-out;opacity:.5;display:none}.carousel-slide.active{opacity:1;display:block}.carousel-button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;padding:10px;cursor:pointer;font-size:24px;border-radius:50%;z-index:2}.carousel-button.prev{left:10px}.carousel-button.next{right:10px}.carousel-dots{position:absolute;bottom:10px;width:100%;text-align:center}.dot{height:12px;width:12px;margin:0 5px;background-color:rgba(0,0,0,.5);border-radius:50%;display:inline-block;cursor:pointer;transition:background-color .3s ease}.dot.active{background-color:#fff}