使用owl-filter.js过滤owl carousel项

Question

我正在使用这个插件过滤我的owl carousel中的项目

但它不工作，我有各种各样的控制台错误，这是当前的一个：“未捕获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>

下面是我如何启动owl carousel的方法：

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

我在使用WordPress主题时遇到了类似的问题。Owl主题显示了与您提到的相同的错误。我已经在头部添加了jquery，问题得到了解决。我不确定这是否适用于你，但你可以试一试。另外，检查jquery之后是否包含了owl脚本文件。

Answer 2

对我来说，它是有效的..。

$(function() {


    $.fn.owlRemoveItem = function(num) {
        var owl_data = $(this).data('owlCarousel');

        owl_data._items = $.map(owl_data._items, function(data, index) {
            if (index != num) return data;
        })

        $(this).find('.owl-item').eq(num).remove();
    }

    $.fn.owlFilter = function(data, callback) {
        var owl = this,
            owl_data = $(owl).data('owlCarousel'),

            $elemCopy = $('<div>').css('display', 'none');

        /* check attr owl-clone exist */
        if (typeof($(owl).data('owl-clone')) == 'undefined') {
            $(owl).find('.owl-item:not(.cloned)').clone().appendTo($elemCopy);
            $(owl).data('owl-clone', $elemCopy);
        } else {
            $elemCopy = $(owl).data('owl-clone');
        }

        /* clear content */
        owl.trigger('replace.owl.carousel', ['<div/>']);

        switch (data) {
            case '*':
                $elemCopy.children().each(function() {
                    owl.trigger('add.owl.carousel', [$(this).clone()]);
                })
                break;
            default:
                $elemCopy.find(data).each(function() {

                    owl.trigger('add.owl.carousel', [$(this).parent().clone()]);
                })
                break;
        }


        /* remove item empty when clear */
        owl.owlRemoveItem(0);
        owl.trigger('refresh.owl.carousel').trigger('to.owl.carousel', [0]);

        // callback
        if (callback) callback.call(this, owl);
    }

    var owl = $('.owl-carousel').owlCarousel({
        autoplay: false,
        nav: true,
        loop: false,
        items: 3,
        autoplayHoverPause: true,
        lazyLoad: true,
        margin: 10,
        responsiveClass: true,
        navText : ["",""],
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: true
            },
            1000: {
                items: 3,
                nav: true,

            }
        },


    });




    /* 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) {

       console.log('ddd');
        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 */
        owl.owlFilter(filter_data, function(_owl) {
            $(_owl).find('.item').each(owlAnimateFilter);
        });
    })


})