OwlCarouselがブートストラップ3で表示されない

-1

WordPressテーマでOwlCarouselを実装しようとしています。ここでは、ブートストラップを使用し、OwlCarouselアセットをインポートしました。OwlCarouselがブートストラップ3で表示されない

ロングストーリーショート：私はOwlCarousel 2を試しましたが、動作しませんでした。私はおそらく、私がこのWordPressのインスタンスで使用するいくつかのものと競合があると思った。だから私はOwlCarouselを試してみました。

すべてのsingle.phpページで、たとえばhttp://www.einfall7.ch/beta/manufaktur/tischkorpus-m-goetti/の場合は、メニューのすぐ下にフローカルーセルが必要です。私のブラウザは何も表示しません。問題がどこにあるのか分かりません。

目標は、記事で定義されている画像の完全な高さカルーセルを表示することです。

EDIT： 私の使用コード：

$(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

：あなたは、このスクリプトを含めるようにサンプル関数である

hereそれについての詳細を読むことができますか？いくつかのコードを提供してください – Vidhi

これは、owlCarouselは関数エラーではないことを示しています。ので、jqueryの競合の問題.. –

@ Vidhiコードを追加しました、ありがとう。 – michael

あなたはjQueryの2.2.4が含まowlCarouselスクリプトが含まれた直後。

WordpressにはjQueryが含まれているので、これは必要ありません（新しいバージョンを自分で含める場合を除き、最初にdequeueより先にする必要があります）。

現在、サイトには2つのバージョンのjQueryが動作しています。私はこれがowlCarouselの問題を引き起こしていると思います。あなたが含まれているものを削除して、あなたは大丈夫です。

Wordpressエンキュー機能を使用して、使用するすべてのJSファイルを含めることをお勧めします。あなたがこれまでに試してみました何のコード

/** 
* 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コードを削除し、wp_header（）で新しいバージョンのjQueryをWordPressに実装するためのコードを追加しました。私も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がブートストラップ3で表示されない

答えて

関連する問題