How to customize owlCarousel 2 navigation?

Question

JavaScript

Hello!
There is a code:

$('.similar-product').owlCarousel({
    margin:10,
    nav:true,
    navText : ['<span class="sl-left"><i class="fas fa-chevron-left fa-3x text-dark"></i></span>','<span class="sl-right"><i class="fas fa-chevron-right fa-3x text-dark"></i></span>'],
    autoWidth: false,
    dots: false,
    navContainerClass: 'owl-nav',
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:4
        },
        1200:{
            items:4
        }
    }
});

How can I set it up so that when the 4th element is added, navigation is enabled?

Answer 1

Always turn on navigation. (hang styles that hide it)
When adding the 4th element, put a class that shows it.