Owlcarousel2: to.owl.carousel - Navigation plugin bug

[AaronLayton]

It seems that the navigator plugin is throwing an error

$($0).trigger("to.owl.carousel", 1)

TypeError: Cannot read property 'start' of undefined

[AaronLayton]

Below is the carousel I have setup at the moment, and it contains 8 items. I am trying to get it to show 2 on the screen at once, but sync it with another carousel

sync1.owlCarousel({
                loop: true,
                margin: 10,
                nav: true,
                dots: false,
                lazyLoad: true,
                items: 2,
                slideBy: 2,
                navText: [
                    "<span class='sprite sprite-arrow-left'></span>",
                    '<span class="sprite sprite-arrow-right"></span>'
                ],
                responsiveClass: true,
                responsive: {
                    // breakpoint from 0 up
                    0: {
                        items: 1,
                        slideBy: 1
                    },
                    // breakpoint from 480 up
                    768: {
                        items: 2,
                        slideBy: 2
                    },
                }
            }).on("change.owl.carousel", function (event) {
                console.log("Second", event);
            });

[AaronLayton]

Plus in the above example change.owl.carousel fires twice for each change

[AaronLayton]

Probably more specifically... The Navigation.pages array is not being populated

[AaronLayton]

To get around my issue I have changed to the below

Navigation.prototype.to = function (position, speed, standard) {
        var length = this.pages.length;

        if (!standard && length) {
            $.proxy(this.overrides.to, this.core)(this.pages[((position % length) + length) % length].start, speed);
        } else {
            $.proxy(this.overrides.to, this.core)(position, speed);
        }
    }

[witrin]

Could you please a complete example with jsfiddle or something? The problem might be that you try to sync before the initialized is fired. I wouldn't force your chosen approach. Because there are several place which won't work until the init process is done. Instead it might be better to suppress some change and changed events during the init.

[AaronLayton]

I will try and get an example JSFiddle to show you.

I was initializing Owl and then adding an onClick to all of the .owl-items after the initialization. Once the .owl-item is clicked then I was trying to do

$(".owl-carousel').trigger("to.owl.carousel", clickedItem.index)

At the time of the click everything is initialised

[sarim]

var toIndex = 1;
$("#carousel").trigger("to.owl.carousel", [toIndex, 1, true]);

This works for me. the last parameter "true" is important. Without it the error is shown.

[witrin]

Please provide a link to an example. I see here several issues and programming mistakes.

[witrin]

No respond.

[iwoodruff]

was also getting the same error until I added true as the 3rd parameter. Please update your docs if this is truly a fix.

[witrin]

I agree that the interface has to be changed.

[iwoodruff]

sorry to be a bitter pill about it, know you're probably really busy. but those docs are misleading.

[witrin]

@iwoodruff Unfortunately you will have to wait a little bit for an update of the docs. Because it's mainly part of the owner, but he is currently not available and I don't know when he is coming back.

[witrin]

See #421.

[x3xmaster]

Try this one.
$(".item").click(function () {
console.log($(this).parent().index());
carousel.trigger("to.owl.carousel", [$(this).parent().index(), 200, true]);
});

[ThomWilhelm]

Just came across this same issue, still seems the docs are outdated:

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

Please update as this is going to catch a lot of users out.

[brunomuler]

@ThomWilhelm I was having the same problem after updating to beta 3, but found out the website is still pointing to beta 2.4, so the documentation is updated to this version, not to beta 3.

[arashtavoosi]

use
dots: true
and it works

[jack-fdrv]

without dots it doesnt work?

[shtalinberg]

dots: false
TypeError: Cannot read property 'start' of undefined,

[BB-000]

Didn't have an error message but didn't work properly until I put the 'true' parameter in

[jafarchoupan]

Cannot read property 'start' of undefined ?