owl 旋转木马 2 自定义导航

Question

我正在使用 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
    });
});

如何将其转换为 owl 轮播 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

    });
});

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

我假设该功能已被删除并在更新中进行了更改，但我无法弄清楚，我是 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;
}

这是打印在页面上的内容：

上一页下一个

Answer 1

该错误表明 'owl' 未在 'this' aka customPager 函数上定义。实际上，您的代码中的任何地方都没有定义名为 'owl' 的变量。我查看了 owl-carousel 2.0 的文档，我猜你需要这样的东西。

var owl = $('.rri-carousel');

而且我在文档中没有看到任何名为 'userItems' 的变量。但是您可以使用 jquery 来访问元素。正确看待事物，

$(document).ready(function () {
    var owl = $('.rri-carousel');

    function customPager() {
        $.each($(owl).find('.item'), function (i) {
            var titleData = jQuery(this).find('img').attr('title');
            var paginationLinks = jQuery('.owl-controls .owl-pagination .owl-page span');
            $(paginationLinks[i]).append(titleData);
        });
    }

    owl.owlCarousel({
        loop          : true,
        items         : 1,
        nav           : false,
        onInitialized : customPager,
        onResized     : customPager
    });
});

我无法完全测试它是否有效，因为我没有你的 html 来测试它，但我的机器上的这段代码没有问题。

Answer 2

我是 javascript 的新手，但这对我有用。 Owl carousel 2 有不同的 CSS 类: .owl-dots .owl-dot 而不是 .owl-控件.owl-分页.owl-页面

我也把this.owl.userItems改成$('.owl-item')到select 每个轮播项目（不确定这是否是合适的解决方案）。

$(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 参数，因为在调整浏览器 window 大小时，它会在现有链接之后重复添加新链接。但是我不确定这个参数的目的是什么。

owl 旋转木马 2 自定义导航

owl carousel 2 custom nav

javascript

jquery

owl-carousel