Owl carousel Navigation buttons not showing
<p>Here is my generated html</p>

<pre><code>&lt;div id="paginationContainer" class="col-md-8 col-md-offset-2 paginationContainer"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(1)"&gt;Primo&lt;/a&gt;
&lt;div class="paginationUl col-md-5"&gt;
    &lt;div class="owl-carousel owl-theme owl-loaded" id="myPagingCarousel"&gt;
        &lt;div class="owl-stage-outer"&gt;
            &lt;div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 853.4px;"&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(1)"&gt;1&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(2)"&gt;2&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(3)"&gt;3&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(4)"&gt;4&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(5)"&gt;5&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(6)"&gt;6&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(7)"&gt;7&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(8)"&gt;8&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(9)"&gt;9&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(10)"&gt;10&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item active" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(11)"&gt;11&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(12)"&gt;12&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(13)"&gt;13&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(14)"&gt;14&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(15)"&gt;15&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(16)"&gt;16&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(17)"&gt;17&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(18)"&gt;18&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(19)"&gt;19&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(20)"&gt;20&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(21)"&gt;21&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(22)"&gt;22&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(23)"&gt;23&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(24)"&gt;24&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(25)"&gt;25&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(26)"&gt;26&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(27)"&gt;27&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(28)"&gt;28&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(29)"&gt;29&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(30)"&gt;30&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(31)"&gt;31&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(32)"&gt;32&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(33)"&gt;33&lt;/a&gt;&lt;/div&gt;
                &lt;div class="owl-item" style="width: 25.1px; margin-right: 0px;"&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(34)"&gt;34&lt;/a&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="owl-controls"&gt;
            &lt;div class="owl-nav"&gt;
                &lt;div class="owl-prev" style="display: none;"&gt;
                    &lt;div&gt;NextPage&lt;/div&gt;
                &lt;/div&gt;
                &lt;div class="owl-next" style="display: none;"&gt;
                    &lt;div&gt;PrevPage&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="owl-dots" style=""&gt;
                &lt;div class="owl-dot active"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div class="owl-dot"&gt;&lt;span&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(totalPages)"&gt;Ultimo&lt;/a&gt;&lt;/div&gt;
</code></pre>

<p>i dont know why my controls are automatically being hidden.</p>

<p>Here is my js call</p>

<pre><code>var owl = $('#myPagingCarousel');
owl.owlCarousel({
   items : 10, //10 items above 1000px browser width
  navigation : true,
    navText: ["&lt;div&gt;NextPage&lt;/div&gt;","&lt;div&gt;PrevPage&lt;/div&gt;"]});
</code></pre>

<p>The markup is actually being generated using a js method. I need to have navigation buttons in the carousel. 
This is the js method creating the html</p>

<pre><code>var html = '&lt;a href="#" class="paginationLi" onclick="fetchPage(1)"&gt;Primo&lt;/a&gt;&lt;div class="paginationUl col-md-5" &gt;&lt;div class="owl-carousel" id="myPagingCarousel"&gt;';
for(i=1;i&lt;=totalPages;i++){
    html += '&lt;a href="#" class="paginationLi" onclick="fetchPage('+i+')"&gt;'+i+'&lt;/a&gt;'
}
html += '&lt;/div&gt;&lt;/div&gt;&lt;a href="#" class="paginationLi" onclick="fetchPage(totalPages)"&gt;Ultimo&lt;/a&gt;';
$("#paginationContainer").html(html);
</code></pre>