猫头鹰旋转木马2自定义导航

我正在使用owl carousel 1插件，我正试图将我所有的东西升级到版本2。我有一个带有自定义导航条的滑块:

$(document).ready(function () {
    function customPager() {
        $.each(this.owl.userItems, function (i) {
            var titleData = jQuery(this).find('img').attr('title');
            var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
            $(paginationLinks[i]).append(titleData);
        });
    }
    $('.rri-carousel').owlCarousel({
        navigation      : false, // Show next and prev buttons
        slideSpeed      : 300,
        paginationSpeed : 400,
        singleItem      : true,
        lazyLoad        : true,
        afterInit       : customPager,
        afterUpdate     : customPager,
        transitionStyle : "fade",
        autoPlay        : true,
        stopOnHover     : true
    });
});

如何将此转换为猫头鹰旋转木马2?我现在有:

$(document).ready(function () {
    function customPager() {
        $.each(this.owl.userItems, function (i) {
            var titleData = jQuery(this).find('img').attr('title');
            var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
            $(paginationLinks[i]).append(titleData);
        });
    }
    $('.rri-carousel').owlCarousel({
        loop          : true,
        items         : 1,
        nav           : false,
        onInitialized : customPager,
        onResized     : customPager
    });
});

然而，我得到Uncaught TypeError: Cannot read property 'userItems' of undefined在铬控制台，当我点击它，它显示错误是在this.owl.userItems上的$.each(this.owl.userItems, function (i) {。

我假设函数在更新中被删除以更改，但我无法弄清楚这一点，我是javascript的新手。

我不仅得到这个错误，而且没有看到像第一个版本那样的分页。

谢谢，希望有人能给我指出正确的方向。

我复制了你的javascript，但仍然没有分页。这是我的php输出的html:

function rri_function($type = 'rri_function') {
    $args = array(
        'post_type'      => 'rri_images',
        'posts_per_page' => 5
    );
    $result = '<div class="rri-carousel owl-theme">';
    //the loop
    $loop = new WP_Query($args);
    while ($loop->have_posts()) {
        $loop->the_post();
        $the_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), $type);
        $result .= '<div><img src="' . $the_url[0] . '" title="' . get_the_title() . '" data-thumb="' . $the_url[0] . '" alt="' . get_the_title() . '"></div>';
    }
    $result .= '</div>';
    return $result;
}

，下面是打印在页面上的内容:

我是新的javascript，但这为我工作。Owl carousel 2有不同的CSS类:。owl-dots .owl-dot而不是。

我也改变了this.owl。userItems到$('.owl-item')选择每个carousel项目(不确定这是否是合适的解决方案)。

$(document).ready(function () {
    function customPager() {
        $.each($('.owl-item'), function (i) {
            var titleData = jQuery(this).find('img').attr('title');
            var paginationLinks = jQuery('.owl-dots .owl-dot span');
            $(paginationLinks[i]).append(titleData);
    });
}
$('.rri-carousel').owlCarousel({
        loop          : true,
        items         : 1,
        nav           : false,
        onInitialized : customPager,
     });
});

编辑:我已经删除了onResized: customPager参数，因为它在调整浏览器窗口大小时反复添加现有链接后的新链接。然而，我不清楚这个参数的目的是什么。