Question

我使用猫头鹰旋转木马，我想在活动时检测第一个和最后一个元素。我试图用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

您可以访问轮播中的元素（我假设您正在引用这些面板），例如$('#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模式。

Answer 2

对于轮播中可见的第一个和最后一个“元素”：

在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
});

如何使用Owl Carousel 2触发功能？

2 个答案: