Is it possible to change the shape of the buttons in Owl Carousel?
I have a slider made with Owl Carousel but I can not find a way to change the buttons next and prev. I would like to make a circle with the arrows inside.
1
1 answers
Yes, you can include a custom CSS that will change the original owl carousel buttons. You can do this by creating pseudo-elements ::before
and ::after
and adjusting the styles as you like (dimensions, colors, arrow size etc.).
The CSS below will change the buttons according to the defined styles. Will replace the original buttons with 50px
buttons with a black arrow in the Middle (see image):
Note that some
!important
to overlay some original plugin settings.
<style>
/* ajusto os botões no tamanho que eu quero */
.owl-prev, .owl-next{
width: 50px;
height: 50px;
position: relative;
background: none !important;
}
/* crio os pseudo-elementos */
.owl-prev::before, .owl-next::before{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
border-radius: 50% !important;
line-height: 50px;
}
/* hover para mudar de cor */
.owl-prev:hover::before, .owl-next:hover::before{
background: aqua;
}
/* crio as setas e centralizo */
.owl-prev::after, .owl-next::after {
content: "";
width: 18px;
height: 18px;
position: absolute;
transform: rotate(135deg);
border: solid black;
border-width: 0 3px 3px 0;
top: 50%; left: 50%;
margin-top: -9px;
margin-left: -4px;
}
/* ajusto a seta next */
.owl-next::after {
transform: rotate(-45deg);
margin-left: -14px;
}
</style>
0
Author: Sam, 2018-01-01 21:42:21