Problems with slide Owl-Carrousel

Question

I am developing a site and I am using Owl-carrousel2 but I have a problem with the option nav would like it to appear on my site I simply on js I add this Lina nav:true only that even so it does not appear when I look at my console navs appear with a class calling for disable that of the one display:none in the slide browsers know that in case it is only give a display:block on the line of css but I don’t think it’s a good practice if I use the nav:true it would have to appear by default without needing an edit via cssfollows what is displayed on the console and the code:

JS:

$('.slide-camp').owlCarousel({
    loop:true,
    autoplay:false,
    autoplayTimeout:5000,
    navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'],
    rewindNav : true,
    slideSpeed: 300,
    singleItem: true, transitionStyle: "fade",
    autoHeight:true,
    responsiveClass:true,
    responsive:{
        0:{
            items:1,
            nav:false
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:4,
            nav:true
        }
    }
});

HTML:

<div class="item">
                        <div class="box-one">
                            <img src="images/slide-04.jpg" class="image-slide-1" alt="Campo" />
                            <div class="overlay">
                                <div class="text-center content-box">
                                    <h3 class="title">Society club</h3>
                                    <p class="text">Quadra society</p>
                                    <ul class="list-inline list-unstyled classifications">
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star" aria-hidden="true"></i></li>
                                        <li><i class="fa fa-star-half-o" aria-hidden="true"></i></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

Answer 1

Looking through various documents, I was able to find a possible solution:

Instead of declaring as nav:true, declare as navigation:true and probably the next and the prev, and from there, just manipulate the items through the classes .owl-prev and .owl-next.

Example:

JS:

$('.owl-carousel').owlCarousel({
    loop:true,
    navigation:true,
    autoplay:false,
    autoplayTimeout:5000

});

$('.owl-next').html('Avançar');
$('.owl-prev').html('Recuar');

Note that instead of NAV I declare navigation:true, and after handling the text by inserting an HTML via js.

I hope I helped! Abs