私は私の<a href="http://plugin.bearsthemes.com/jquery/OwlFilter/" rel="nofollow noreferrer">owl carousel</a></p> <p>で項目をフィルタリングするために、このプラグインを使用しています。しかし、それは動作していない

Question

フクロウカルーセル項目をフィルタリングするフクロウ-filter.jsを使用するには、私は、これは現在の一つであり、様々なコンソールエラーがありました： 「キャッチされていないにReferenceError：initOwlEventが定義されていない」

を、私は私のページのフッターにjquery.owl-filter.jsを追加し、この下に、このスクリプトタグを使用してプラグインを呼ばれています

<script> 
    $(function() { 
    /* animate filter */ 
     var owlAnimateFilter = function(even) { 
      $(this) 
      .addClass('__loading') 
      .delay(70 * $(this).parent().index()) 
      .queue(function() { 
       $(this).dequeue().removeClass('__loading') 
      }) 
     } 

     $('.btn-filter-wrap').on('click', '.btn-filter', function(e) { 
      var filter_data = $(this).data('filter'); 

      /* return if current */ 
      if($(this).hasClass('btn-active')) return; 

      /* active current */ 
      $(this).addClass('btn-active').siblings().removeClass('btn-active'); 

      /* Filter */ 
      initOwlEvent.owlFilter(filter_data, function(_owl) { 
       $(_owl).find('.item').each(owlAnimateFilter); 
      }); 
     }) 
    }) 
    </script> 

これが私がフクロウ車を始動させる方法ですousel：

var OwlCarousel = function() { 

    return {  

     initOwlEvent: function() { 
      jQuery(document).ready(function() { 
       var owl = jQuery(".owl-events"); 
       owl.owlCarousel({ 
        lazyLoad: true, 
        items: 4, 
        itemsDesktop : [1000,2], 
        itemsDesktopSmall : [900,2], 
        itemsTablet: [600,1], 
        itemsMobile : [479,1], 
        slideSpeed: 1000, 
        autoPlay : 5000 
       }); 


      });    
     } 


}(); 

マイHTML

<div class="row parallax-counter-v4 parallaxBg" id="row_events"> 
    <div class="content container"> 
    <h2 class="title-v2 title-center">Events</h2> 
    <div id="filter-container" class="btn-filter-wrap cbp-1-filters-text"> 
     <div data-filter=".event-1" class="btn-filter cbp-filter-item">Main Events</div> | 
     <div data-filter=".event-2" class="btn-filter cbp-filter-item">The Venue</div> | 
     <div data-filter=".event-3" class="btn-filter cbp-filter-item">Woodys</div> | 
     <div data-filter=".event-4" class="btn-filter cbp-filter-item">Activities</div> 
    </div> 
    <div class="owl-carousel-v1 owl-work-v1 margin-bottom-50 mobile-margin-bottom-10"> 
     <div class="owl-events"> 
     {exp:su_event:homepage limit="8"} {events} 

     <div class="item news-v2 cbp-item event-{venue_id}"> 
      <div class="news-v2-badge"> 
      {if thumbnail_url == ""} 
      <a href="/events/id/{event_id}-{url_name}"> 
       <img alt="" class="img-responsive lazyOwl" src="" /> 
      </a> 
      {if:else} 
      <a href="/events/id/{event_id}-{url_name}"> 
       <img alt="" class="img-responsive lazyOwl" src="{thumbnail_url}" /> 
      </a> 
      {/if} 
      <p> 
       <span>{start_date format="%d"}</span> 
       <small>{start_date format="%M"}</small> 
      </p> 
      </div> 
      <h4><a href="/events/id/{event_id}-{url_name}">{title}</a></h4> 
      <p>{description}</p> 
     </div> 

     {/events} {/exp:su_event:homepage} 
     </div> 
    </div> 
    </div> 
</div> 

Answer 1

ワードプレスのテーマで作業しながら、私は同様の問題がありました。 Owlのテーマはあなたが言及したのと同じエラーを表示しました。ヘッダーにjqueryを追加しました。問題は解決しました。これがあなたのために機能するかどうかはわかりませんが、試してみてください。また、jqueryの後にowlスクリプトファイルが含まれているかどうかを確認してください。