Is it possible to change the format of buttons in Owl Carousel?

Asked

Viewed 925 times

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.

owl-carousel

  • 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.

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

inserir a descrição da imagem aqui

Note that some have been used !important to 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.