ScrollSlider.css

/* universal sly */
.slyWrap .controls { margin: 20px 0 ; }
 
.controls { text-align: center; }
 
.sly { overflow: hidden; }
.sly > ul { list-style: none; margin: 0; padding: 0;}
.sly > ul li { position: relative; margin: 0; padding: 0; background: #4DBCE9; color: #fff; text-align: center; cursor: pointer; display: inline-block; }
.sly > ul li.active { background: #fff; color: #4DBCE9;
    -webkit-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
    -moz-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
    -o-box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
    box-shadow: inset 0 0 0 1px #4DBCE9, inset 0 0 40px 20px #97e6f7;
}
 
.pages { list-style: none; margin: 20px 0; padding: 0; text-align: center; }
.pages li { display: inline-block; width: 11px; height: 11px; margin: 0 2px; text-indent: -999px; background: #fff; border-radius: 10px; cursor: pointer;
    overflow: hidden; border: 1px solid #aaa;
}
.pages li:hover { background: #eee; }
.pages li.active { background: #999; border-color: #888; box-shadow: inset 0 0 0 2px #eee; }
 
.scrollbar { background: #808080; border-radius: 4px; border: 2px solid #808080; border-top-color: #666; line-height: 0; }
.scrollbar .handle { border-radius: 4px; background: #fff; cursor: pointer; line-height: 0;
    -webkit-box-shadow: 0 1px 0 #555;
    -moz-box-shadow: 0 1px 0 #555;
    -o-box-shadow: 0 1px 0 #555;
    box-shadow: 0 1px 0 #555;
}
 
/* Horizontal examples */
.horizontal.slyWrap { 
    
    /* margin: 0 0; width: 800px; */
    /* font-size: 1rem; */
    display: inline-block;
    width: 100% !important;
    margin: 0;

}
 
.horizontal .scrollbar { margin: 1em 0; height: 5px; }
.horizontal .scrollbar .handle { width: 100px; height: 100%; }
 
.horizontal.example1 .sly { height: 170px;  }
.horizontal.example1 .sly ul { height: 100%; }
.horizontal.example1 .sly ul li { float: left; width: 187px; height: 100%; margin: 0 1px 0 0; font-size: 50px; line-height: 170px; }