Hamza Aziz Hamza Aziz - 5 months ago 179
jQuery Question

event listener not working in owl carousel

i want lo listen to event but it's not working for me
as you can see i try to use console.log(pages); to listen to number of pages but when i open console i don't get any response



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

}





Could you please help?

Answer

Callbacks

Instead of attaching an event handler you can also just add a callback to the options of Owl Carousel.

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

Data

Each event passes very useful information within the event object . Based on the example above:

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
}

From:

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

Your example looks fine to me, just print after and before to make sure your property will be taken by owlCarroussel. Did you add the right jQuery header?

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