owl carousel 2 custom nav

Question

I'm using owl carousel 1 plugin and I'm trying to upgrade all my stuff to version 2. I have a slider with a custom navbar:

$(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
    });
});

How do I convert this to owl carousel 2? I currently have:

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

    });
});

However I get Uncaught TypeError: Cannot read property 'userItems' of undefined in the chrome console and when I click it it shows the error is on $.each(this.owl.userItems, function (i) { on this.owl.userItems.

I'm assuming that function was removed to changed in the update but I cannot figure any of this out, I'm new to javascript.

Not only do I get this error, I also don't see any pager like I did in the first version.

Thanks and hopefully someone can point me in the right direction.

EDIT:

I copied your javascript but still no pagination.. Here is my php that outputs the 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;
}

and here is what gets printed on the page:

prev next

Answer 1

I am new to javascript but this worked for me. Owl carousel 2 has different CSS classes: .owl-dots .owl-dot instead of .owl-controls .owl-pagination .owl-page

I've also changed this.owl.userItems to $('.owl-item') to select each carousel item (not sure whether this is appropriate solution).

$(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,
     });
});

EDIT: I have removed onResized: customPager parameter because it was repeatedly adding new links after existing ones when resizing browser window. However I am not shure what was the purpose of this parameter.

Answer 2

The error indicates that 'owl' is not defined on 'this' aka customPager function. And actually no variable named 'owl' is defined anywhere in your code. I looked up at the documentation of owl-carousel 2.0 and I guess you need something like this.

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

and I didn't see any variable named 'userItems' in the documentation. But you can use jquery to access the elements. to put things in perspective,

$(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
    });
});

I can't fully test whether it's working or not because I don't have your html to test it with, but I'm having no problems with this code on my machine.