owl-filter.js Mit Artikeln Eule Karussell

Question

filtern durch

ich dieses Plugin verwenden Elemente zu filtern durch in meinem owl carousel

Aber es funktioniert nicht, ich habe verschiedene Konsole Fehler hat, ist dies die aktuelle ist: "Uncaught Reference: initOwlEvent ist nicht definiert"

ich habe den jquery.owl-filter.js in der Fußzeile meiner Seite hinzugefügt, und darunter so genannte Plugin mit diesem Skript-Tag:

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

So initiiere ich das Eulenauto 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 
       }); 


      });    
     } 


}(); 

Mein 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

Ich hatte ein ähnliches Problem, während sie mit Wordpress-Theme zu arbeiten. Owl-Thema zeigte den gleichen Fehler an, den Sie erwähnt haben. Ich habe jquery in der Kopfzeile hinzugefügt und das Problem wurde gelöst Ich bin mir nicht sicher, ob dies für Sie funktioniert, aber Sie können es versuchen. Überprüfen Sie außerdem, ob die Eulenskriptdateien nach jquery enthalten sind.