Is it possible to change the shape of the buttons on the Owl Carousel?

1

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.

    
asked by anonymous 01.01.2018 / 20:52

1 answer

0

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!importantwasusedtooverridesome  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>
    
01.01.2018 / 22:11