Boa tarde pessoal, estou com um problema para remover a borda dos botões de navegação laterais utilizando o owl-carousel, encontrei algumas soluções porem nenhuma funcionou no meu código. Colocarei a baixo o link de uma delas e o meu código.
Pela forma que este projeto precisa ser feito, o HTML, CSS e javascript estão na mesma pagina.
https://stackoverflow.com/questions/33332387/owl-carousel-trying-to-remove-grey-border-around-nav
<HTML>
<body>
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
<!-- jQuery 1.7+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Include js plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.js"></script>
<script>
$(document).ready(function () {
$('.main-content .owl-carousel').owlCarousel({
loop: true,
nav: true,
navText: ["<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-1-e1575493593214.png'>","<img src='https://originhealth.com.br/wp-content/uploads/2019/12/Botão-Carousel-2.png'>"],
/*navText: [
'<i class="fa fa-angle-left" aria-hidden="true"></i>',
'<i class="fa fa-angle-right" aria-hidden="true"></i>'
],*/
navContainer: '.main-content .custom-nav',
responsive: {
0: {
stagePadding: 1,
margin: 0,
items: 1
},
600: {
stagePadding: 200,
margin: 60,
items: 1
},
1000: {
stagePadding: 200,
margin: 100,
items: 1
}
}
});
});
</script>
<style>
.main-content {
position: relative;
}
.custom-nav {
position: absolute;
top: 25%;
left: 11.5%;
right: 11.5%;
}
.owl-prev,
.owl-next, .owl-next:focus, .owl-prev:focus {
position: absolute;
height: 100px;
color: inherit;
background: none;
border: none;
outline: none;
z-index: 100;
}
i {
font-size: 2.5rem;
color: #cecece;
}
.owl-prev {
left: 0%;
}
.owl-next {
right: 0%;
}
</style>
<div class="main-content">
<div class="owl-carousel owl-theme">
<div class="item">
<img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 1">
</div>
<div class="item">
<img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 2">
</div>
<div class="item">
<img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 3">
</div>
<div class="item">
<img src="https://placehold.it/700x400/999999/cccccc" alt="Picture 4">
</div>
</div>
<div class="owl-theme">
<div class="owl-controls">
<div class="custom-nav owl-nav">
</div>
</div>
</div>
</div>
</body>
</HTML>