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.

Author: Sam, 2018-01-01

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):

insert the description of the image here

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