Owl Carousel - afterAction callback

HTML

<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<link rel="stylesheet" href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<div id="owl-demo" class="owl-carousel">
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF" alt="" />
    </div>
    <div>
        <img src="http://placehold.it/200x200/42bdc2/FFFFFF" alt="" />
    </div>
</div>

CSS

#owl-demo .owl-item > div img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom:4px;
}
#owl-demo .owl-item > div {
    padding: 0px 2px
}

JavaScript

$(document).ready(function () {
    $("#owl-demo").owlCarousel({
        navigation: true,
        pagination: true,
        singleItem: true,
        addClassActive : true,
        afterAction: afterActionFunc //afterAction callback - is run on startup and after each move.
    });

    function afterActionFunc() { alert('k');
        //get owl object 
        var that = this;

        //get number of current slide (starting from 0)
        var current = that.currentSlide;

        //get jquery object of current slide
        var $currentSlide = that.owlItems[current];

        //see console
        console.log($currentSlide);
    }
});