1
I have a slider made with Owl Carousel but I can’t find a way to change the buttons next and Prev. I’d like to make a circle with the arrows inside.
1 answer
0
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 styles as you like (dimensions, colors, arrow size etc.).
The CSS below will change the buttons according to the styles defined. It will replace the original buttons with buttons 50px with a black arrow in the middle (see image):
Note that some have been used
!importantto overlap 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>
Browser other questions tagged owl-carousel
You are not signed in. Login or sign up in order to post.
Welcome to the Stackoverflow in Portuguese. As the name suggests, the official language used here is Portuguese. So, could you please translate your question? If you prefer, you can also ask the same question on Stackoverflow website in English.
– user28595