How to make the previous / next buttons always appear.

Hello,

How to make the previous / next buttons always appear.
https://uploaddeimagens.com.br/imagens/sem_titulo-jpg-8cb03a8d-9e37-4b89-aae6-f036a3aec94a

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

body .owl-carousel .owl-nav .owl-prev {
    left: -47px;
}

body .owl-carousel .owl-nav .owl-next {
	right: -47px;
}

body .owl-carousel .owl-nav>div {
    opacity: 1;
}

Regards

Hello,

On the cell phone is not showing the button, would have like to always visible in the mobile phone as well.

Thank you.

Hi,

Try to add the following code snippet to the Custom CSS area in Theme Settings.

@media (max-width: 1024px) {
	body .owl-carousel:hover .owl-nav .owl-prev,
	body .owl-carousel .owl-nav div.owl-prev {
		left: -20px;
	}
	
	body .owl-carousel:hover .owl-nav .owl-next,
	body .owl-carousel .owl-nav div.owl-next {
		right: -20px;
	}
}

@media (max-width: 768px) {

body .banners-carousel.owl-carousel .owl-nav, 
body .product-items.owl-carousel .owl-nav, 
body .testimonials.owl-carousel .owl-nav {
	display: block;
}

body .owl-carousel .owl-nav>div.owl-prev {
	left: 20px;
}

body .owl-carousel .owl-nav>div.owl-next {
	right: 20px;
}
	
}

Regards

Hi,

It worked, thank you.

On the cell phone the button was above the product description.
https://uploaddeimagens.com.br/imagens/sem_titulo-png-f157e57e-d85e-481a-95c0-3cafb5bb64e9

Do you have transparent alternative or change button position?

Hello,

I recommend putting higher http://prntscr.com/m4htv9 as you see if we make a transparent background-color, navigation is not visible.

Replace the code for 768px:

@media (max-width: 768px) {

body .banners-carousel.owl-carousel .owl-nav, 
body .product-items.owl-carousel .owl-nav, 
body .testimonials.owl-carousel .owl-nav {
	display: block;
}

body .owl-carousel .owl-nav>div.owl-prev {
	left: 20px;
	top:20%;
}

body .owl-carousel .owl-nav>div.owl-next {
	right: 20px;
	top:20%
}
}

Best Regards

[Author]

Posts