事件监听器在owl carousel中不工作

event listener not working in owl carousel

本文关键字：工作 carousel owl 监听器 事件      更新时间：2023-09-26

我想听事件，但它不适合我正如您所看到的，我尝试使用console.log(pages);听页数但是当我打开控制台时，我没有得到任何响应

var owl = $('.owl-carousel');
        owl.owlCarousel({
            onDragged: callback,
            animateOut: 'fadeOut',
            animateIn: 'fadeIn',
            items: 1,
            loop: true,
            autoplay: false,
            nav: true,
            dots: true
        });
        function callback(event) {
            var pages     = event.page.count;     // Number of pages
            console.log(pages);
        }

你能帮帮忙吗?

回调

除了附加事件处理程序，您还可以在Owl Carousel的选项中添加回调。

$('.owl-carousel').owlCarousel({
    onDragged: callback
});
function callback(event) {
    ...
}

每个事件在事件对象中传递非常有用的信息。根据上面的例子:

function callback(event) {
    // Provided by the core
    var element   = event.target;         // DOM element, in this example .owl-carousel
    var name      = event.type;           // Name of the event, in this example dragged
    var namespace = event.namespace;      // Namespace of the event, in this example owl.carousel
    var items     = event.item.count;     // Number of items
    var item      = event.item.index;     // Position of the current item
    // Provided by the navigation plugin
    var pages     = event.page.count;     // Number of pages
    var page      = event.page.index;     // Position of the current page
    var size      = event.page.size;      // Number of items per page
}
来自:

http://www.owlcarousel.owlgraphic.com/docs/api-events.html

你的例子看起来很好，我只是打印前后，以确保您的财产将被owlCarroussel。您是否添加了正确的jQuery标题?

<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
   var owl = $('.owl-carousel');
    alert('before')
    owl.owlCarousel({
        onDragged: callback,
        animateOut: 'fadeOut',
        animateIn: 'fadeIn',
        items: 1,
        loop: true,
        autoplay: false,
        nav: true,
        dots: true
    });
    alert('After')
    function callback(event) {
        var pages     = event.page.count;     // Number of pages
        console.log(pages);
    }
</script>
相关文章：