xxxxxxxxxx
prevArrow: '<button class="slide-arrow prev-arrow"></button>',
nextArrow: '<button class="slide-arrow next-arrow"></button>'
xxxxxxxxxx
$(document).ready(function(){
$('.slider').slick({
autoplay:true,
arrows: true,
prevArrow:"<button type='button' class='slick-prev pull-left'><i class='fa fa-angle-left' aria-hidden='true'></i></button>",
nextArrow:"<button type='button' class='slick-next pull-right'><i class='fa fa-angle-right' aria-hidden='true'></i></button>"
});
});
xxxxxxxxxx
.slick-prev:before {
content: "<";
color: red;
font-size: 30px;
}
.slick-next:before {
content: ">";
color: red;
font-size: 30px;
}
xxxxxxxxxx
/* Slider arrows */
.slick-prev,
.slick-next {
position: absolute;
bottom: 0;
left: 0;
background: $white;
border-radius: 50%;
aspect-ratio: 1;
width: 40px;
font-size: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
transition: .3s;
border: 1px solid $blue-700;
&.slick-disabled {
opacity: .5;
pointer-events: none;
&:hover {
border: 0;
}
}
&:hover {
background: $blue-400;
color: $white;
border: 1px solid transparent;
&:before {
color: $white;
}
}
&:before {
content: $icon-arrow-left;
color: $blue-700;
font-size: 13px;
font-family: $iconFont;
transition: .3s;
@include media-breakpoint-down(md) {
font-size: 18px;
}
}
}
.slick-next {
transform: translateX(45px);
&:before {
content: $icon-arrow-right;
}
}