.slider{
    position:relative;
    width:100%;
    max-width:900px;
    margin:30px auto;
    overflow:hidden;
    border-radius:8px;
}

.slider-track img{
    width:100%;
    display:none;
}

.slider-track img.active{
    display:block;
}

.prev, .next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:rgba(0,0,0,.45);
    color:#fff;
    border:0;
    width:42px;
    height:42px;
    cursor:pointer;
    font-size:22px;
}

.prev{ left:10px; }
.next{ right:10px; }

.dots{
    position:absolute;
    bottom:10px;
    width:100%;
    text-align:center;
}

.dot{
    display:inline-block;
    width:10px;
    height:10px;
    margin:0 4px;
    background:rgba(255,255,255,.5);
    border-radius:50%;
    cursor:pointer;
}

.dot.active{
    background:#fff;
}