1
Good afternoon guys, I’m having a problem removing the edge of the side navigation buttons using Owl-Carousel, I found some solutions but none worked in my code. I’ll put down the link to one of them and my code.
By the way this project needs to be done, HTML, CSS and javascript are on the same page.
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>
You mean the balls?
– Sam
To the side buttons, I will edit in the publication.
– Erico Calasans
I had posted a reply and put again. Take a look.
– Sam