無法添加控件包裝類

我在WordPress的使用owl-carousel之外，我試圖讓在site顯示相同的HTML結果：無法添加控件包裝類

<div class="owl-carousel owl-theme owl-loaded"> 
    <div class="owl-stage-outer"> 
     <div class="owl-stage"> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
     </div> 
    </div> 
    <div class="owl-controls"> 
     <div class="owl-nav"> 
      <div class="owl-prev">prev</div> 
      <div class="owl-next">next</div> 
     </div> 
     <div class="owl-dots"> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 
    </div> 
</div>

，你可以看到有一個包含了owl-stage-outer滑塊的項目，在底部我們可以找到owl-controls類，其中包含按鈕可導航到右側或左側。

現在在WordPress我有這個模板結構：

<div id="owl-featured" class="owl-carousel owl-theme"> 

    <?php //Check if only one post is featured ?> 

    <?php if (is_home() && !is_paged() && (ot_get_option('featured-posts-count') == '1') && $featured->have_posts()): // No slider if 1 post is featured ?> 

     <?php while ($featured->have_posts()): $featured->the_post(); ?> 
      <?php get_template_part('content-featured'); ?> 
     <?php endwhile; ?> 

    <?php elseif (is_home() && !is_paged() && (ot_get_option('featured-posts-count') !='0') && $featured->have_posts()): // Show slider if posts are not 1 or 0 ?> 

     <?php while ($featured->have_posts()): $featured->the_post(); ?> 
      <?php get_template_part('content-featured'); ?> 
     <?php endwhile; ?> 

    <?php endif; ?> 

    <div class="owl-controls"> 
     <div class="owl-pagination"></div> 
     <div class="owl-buttons"></div> 
    </div> 
</div>

我創建了一個DIV是旋轉木馬容器，它裏面我已經插入WordPress的查詢來獲取內容，現在你可以在我以前做的owl-controls條件的尾部看到，事實上我需要得到owl-wrapper外的控制，作爲第一個例子提供的，但我得到的結果如下：

<div id="owl-featured" class="owl-carousel owl-theme"> 
    <div class="owl-wrapper-outer"> 
     <div class="owl-wrapper"> 
      <div class="owl-item"> 
      <div class="owl-item"> 
      ... 
      ... 
      <div class="owl-item"> 
       <div class="owl-controls"> 
        <div class="owl-pagination"></div> 
        <div class="owl-buttons"></div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

，你可以看到owl-controls在owl-item之內，我不明白爲什麼會發生這種情況，我從三個小時就陷入了這種情況，我無法找到解決方案。

PS：這是我的滑塊的JS初始化：

$("#owl-featured").owlCarousel({ 
    nav: true, 
    navContainer: '.owl-buttons', 
    dotData: true, 
    dotsContainer: '.owl-pagination', 
    dotClass: 'owl-page', 
    stageOuterClass: 'owl-wrapper-outer', 
    stageClass: 'owl-wrapper', 
    navContainerClass: 'owl-controls', 
    navText : ['prev','next'], 
    items : 3, 
    itemsDesktop : [1440,3], 
    itemsDesktopSmall : [1024,3], 
    itemsTablet: [768,2], 
    itemsTabletSmall: [719,1], 
    itemsMobile : [479,1] 
});

有人知道哪裏是錯誤？

來源

2017-08-03 Aalok Amalmani

是您從頁面源代碼或瀏覽器檢查器中顯示的結果html嗎？如果第二個 - 看看源代碼找出你丟失了一些關閉div的地方 – Anarion

@Aarion yep，沒有div沒有關閉，只是分頁的內部不好 –

@Aalok，你可能首先需要看到的基本演示： https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

之前的init貓頭鷹旋轉木馬，讓您的物品清潔基本演示;
您只能自定義項目內容「<h4>number</h4>」;（對於大多數情況它已經足夠了）;
關於您的自定義控件，您需要添加「貓頭鷹傳送帶」並添加自定義點擊事件。
當你初始化貓頭鷹旋轉木馬時，貓頭鷹幫助用「貓頭鷹項目」包裝你的項目，然後用「貓頭鷹階段」包裝你的所有項目，然後添加貓頭鷹的控制DOM「貓頭鷹控制」，幷包裝「貓頭鷹階段「」貓頭鷹控制「與」貓頭鷹階段外部「;

來源

2017-08-07 06:32:42 Kate

無法添加控件包裝類

回答

相關問題