OwlCarousel不顯示Bootstrap 3

-1

我試圖在WordPress主題中實現OwlCarousel，我使用Bootstrap並導入了OwlCarousel資源。OwlCarousel不顯示Bootstrap 3

長話短說：我試過OwlCarousel 2，它沒有工作。我認爲可能與我在這個WordPress實例中使用的某些東西有衝突。所以我嘗試了OwlCarousel：不工作。

在每個single.php頁面上，例如http://www.einfall7.ch/beta/manufaktur/tischkorpus-m-goetti/，應該有一個貓頭鷹傳送帶在菜單下方。我的瀏覽器什麼都沒有我不確定，問題在哪裏。

目標是顯示文章中定義的全高度圖像旋轉木馬。

編輯： 我使用的代碼：

$(document).ready(function() { 
 
    $("#owl-demo").owlCarousel({ 
 
     navigation: true, // Show next and prev buttons 
 
     slideSpeed: 300, 
 
     paginationSpeed: 400, 
 
     singleItem: true 
 
      // "singleItem:true" is a shortcut for: 
 
      // items : 1, 
 
      // itemsDesktop : false, 
 
      // itemsDesktopSmall : false, 
 
      // itemsTablet: false, 
 
      // itemsMobile : false 
 
    }); 
 
});

#owl-demo .item img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<html> 
 
    <head> 
 
     <!-- Important Owl stylesheet --> 
 
     <link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/owl/owl.carousel.css"> 
 
     <!-- Default Owl Theme --> 
 
     <link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/owl/owl.theme.css"> 
 
     <!-- Include Owl js plugin --> 
 
     <script src="<?php echo esc_url(get_template_directory_uri()); ?>/owl/owl.carousel.js"></script> 
 
    </head> 
 
    <body> 
 
     <div id="owl-demo" class="owl-carousel owl-theme"> 
 
      <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="The Last of us"></div> 
 
      <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="GTA V"></div> 
 
      <div class="item"><img src="http://www.einfall7.ch/beta/wp-content/themes/einfall7-2016/images/ref-einfall7-gr.jpg" alt="Mirror Edge"></div> 
 
     </div> 
 
    </body> 
 
</html>

來源

2016-06-22 michael

什麼代碼，您到目前爲止試過嗎？提供一些代碼 – Vidhi

它給一個owlCarousel不是一個函數錯誤。所以jQuery的衝突問題.. –

@Vidhi添加了代碼，謝謝。 – michael

右後您包括owlCarousel腳本，你包括的jQuery 2.2.4。

由於Wordpress包含jQuery，所以不需要這個（除非你想自己包含更新的版本，但是你應該首先使用dequeue）。

現在你有2個版本的jQuery在網站上運行。我認爲這是導致與owlCarousel的問題。刪除你包括的一個，你應該沒問題。

最好的做法是包含使用Wordpress入隊函數所使用的所有JS文件。你可以閱讀更多關於它here

這是一個示例功能包括腳本：

/** 
* Enqueue script 
* 
* The callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end. 
*/ 
function my_scripts_method() { 
    wp_enqueue_script('owlCarousel'); 
} 
add_action('wp_enqueue_scripts', 'my_scripts_method');

來源

2016-06-22 12:32:01

謝謝！我刪除了你提到的jQuery代碼，並添加了一些代碼讓wordpress在wp_header（）中實現了更新版本的jQuery;我還將owlCarousel-JS移至頁腳。現在它像一個魅力。這個是我在我的functions.php中使用的代碼： 'if（！is_admin（））{ \t wp_deregister_script（'jquery'）; \t wp_register_script（'jquery'，（「http://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js」），false，'2.2.4'）; \t wp_enqueue_script（'jquery'）; }' – michael

OwlCarousel不顯示Bootstrap 3

回答

相關問題