I have a slider made with Owl Carousel but I can not find a way to change the next and prev buttons. I would like to circle the arrows inside.
I have a slider made with Owl Carousel but I can not find a way to change the next and prev buttons. I would like to circle the arrows inside.
Yes, you can include custom CSS that will change the original Owl Carousel buttons. You can do this by creating pseudo-elements ::before
and ::after
and adjusting styles as you want (dimensions, colors, arrow size, etc.).
The CSS below will change the buttons according to the styles defined. You will replace the original buttons with 50px
buttons with a black arrow in the middle (see image):
Notethatsome
!important
wasusedtooverridesome settings.
<style>/*ajustoosbotõesnotamanhoqueeuquero*/.owl-prev,.owl-next{width:50px;height:50px;position:relative;background:none!important;}/*crioospseudo-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;}/*hoverparamudardecor*/.owl-prev:hover::before,.owl-next:hover::before{background:aqua;}/*crioassetasecentralizo*/.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>