如何使用猫头鹰旋转木马2触发后续功能

Question

我使用owl旋转木马，我想在活动时检测第一个和最后一个元素。我试图用afterAction属性触发一个函数，但我无法实现。

这是初始化程序：

$('#carousel').owlCarousel({
        slideBy: 4,
        loop: true,
        margin: 10,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: false
            },
            1000: {
                items: 4,
                nav: true,
                loop: false
            }
        },
        afterAction : afterAction
    });
    function afterAction(){
        console.log("owl after action");
    }

Answer 1

对于转盘中可见的第一个和最后一个"元素"：

在afterAction函数this.visibleItems中，返回转盘中显示的可见项目的数组。第一个可见项将始终位于数组位置0，最后一个将为长度-1。

function afterAction() {
    var first = this.visibleItems[0];
    var last = this.visibleItems[this.visibleItems.length - 1];
    console.log(first, last);
    console.log($('.owl-item')[first], $('.owl-item')[last]);
}
$('#carousel').owlCarousel({
    slideBy: 4,
    loop: true,
    margin: 10,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: true
        },
        600: {
            items: 3,
            nav: false
        },
        1000: {
            items: 4,
            nav: true,
            loop: false
        }
    },
    afterAction : afterAction
});

Answer 2

您可以访问转盘内的元素（我假设您指的是面板），如$('#carousel .owl-item:first)和$('#carousel .owl-item:last)。要创建转盘并仅在转盘构建完成后触发函数，请尝试以下方法。

var exampleApp = {
  createCarousel : function(options) {
    $('#carousel').owlCarousel({
        slideBy: 4,
        loop: true,
        margin: 10,
        responsiveClass: true,
        responsive: {
            0: {
                items: 1,
                nav: true
            },
            600: {
                items: 3,
                nav: false
            },
            1000: {
                items: 4,
                nav: true,
                loop: false
            }
        }
     });
     this.afterwards(options.passedStr);
  },
  afterWards : function( testStr ){ // passedStr becomes testStr here
    console.log('afterwards method ',testStr );
  },

  init : function (options) {
    this.createCarousel(options);
  }
}
exampleApp.init({"passedStr":"singleton pattern"});

这是一个JavaScript Singleton模式。