CSS - Slick
.slick-prev, .slick-next {
position: absolute;
display: block;
height: 20px;
width: 20px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: #333;
top: 50%;
margin-top: -20px;
padding: 0;
border: none;
outline: none;
z-index: 999;
}
.slick-prev {
left: 25px;
}
.slick-next {
right: 25px;
}
.slick-prev:before, .slick-next:before {
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
font-size: 40px;
line-height: 1;
color: rgba(255,2255,255,.5);
}
.slick-prev::before {
content: "\f104";
}
.slick-next::before {
content: "\f105";
}
.slick-dots {
position: absolute;
bottom: 20px;
list-style: none;
display: block;
text-align: center;
padding: 0;
width: 100%;
}
.slick-dots li.slick-active button:before {
color: #FFF;
opacity: 0.75;
}
.slick-dots li button::before {
//content: $slick-dot-character;
position: absolute;
top: 0px;
left: 0px;
width: 20px;
height: 20px;
font-family: slick;
font-size: 10px;
line-height: 20px;
text-align: center;
color: #FFF;
opacity: 0.25;
-webkit-font-smoothing: antialiased;
}