javascript - Owl Carousel 导航按钮不显示

Question

这是我生成的 html

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

我不知道为什么我的控件会自动隐藏。

这是我的 js 调用

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

标记实际上是使用 js 方法生成的。我需要在轮播中添加导航按钮。这是创建html的js方法

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

Answer 1

这是我从他们的网站下载的 js 包的问题。当我使用 cloudfare 的 cdn 后，问题就解决了