Owlcarousel2: Owl Carousel Sync - Infinite Loop

[changetherules]

Hi,

found this carousel on the net but the problem is when you reach the last slide/thumbnail it rewinds back to the first slide/thumbnail, rather than continues looping

http://owlgraphic.com/owlcarousel/demos/sync.html

Is there a way to make it infinite loop? Thanks

[odahcam]

Yes, there is!

First you need to get the version 2 of OwlCarousel, not the version 1 as you post here.

Then go here: #1378 and get the code you need to make the Click Navigation and Sync carousels.

[eminos]

@odahcam I can't get this to work.
What am I doing wrong?

    $('.slider-configurator').owlCarousel({
        items: 1,
        //dotsData: true,
        linked: '.slider-nav-configurator',
        onRefreshed: function() {
            setTimeout(function(){
                $('.slider-configurator').css('min-height', $('.slider-configurator').outerHeight());
            }, 2000);
        }
    });

    $('.slider-nav-configurator').owlCarousel({
        items: 5,
        margin: 20,
        linked: '.slider-configurator',
        mouseNav: true,
        onRefreshed: function() {
            setTimeout(function(){
                $('.slider-nav-configurator').css('min-height', $('.slider-nav-configurator').outerHeight());
            }, 2000);
        }
    });

Live example here:
https://www.lintex.se/configurator-dev.html

[odahcam]

I will take a look on your code, but first take a look on this: https://jsfiddle.net/odahcam/dce7e6ct/

Edit: your carousel are Linked, but the mouseNav seems to don't run. You should console.log() on $.fn.owlCarousel.Constructor.Plugins and take a look on the object returned, it contains all the plugins registered on owlCarousel and it should have mousenav as a key if mousenav is registered to owlCarousel.

[eminos]

I'm not sure I understand.
If I run $.fn.owlCarousel.Constructor.Plugins in the console I get the object and there is a mouseNav function there.

That jsFiddle code I have already looked at and as far as I can see that's how I have done it (except the "current class" part, but it should work without that).

Could the issue have something to do with that I'm loading the carousel items (in both carousels) dynamically, after they are initiated? You can see the vue.js code at the bottom of the html document.

[odahcam]

The dynamic loading is a interesting point. I need to see if the owlCarousel.refresh forces owl.mouseNav to refresh too, maybe this is the problem.

I had some problems with loading the carousel source code and plugins at once, where the plugins where trying to use the window.owlCarousel object before it loads 100%.

If you can see in your site the correct plugin funcions on $.fn.owlCarousel.Constructor.Plugins so the loading of source code is all right.

Now I'm very curious about the dynamic content loading. I'll take a look on this.

---

Edit: I'd also like to suggest you to change the issue name to something like: "mouseNav not working with dynamic content loading". Because the "Linked" plugin (Sync) is working as it should.

[eminos]

Hi @odahcam! Did you figure out if it's the dynamic loading that's causing the issues with mouseNav?

I did not create this issue, so I can't change the title :)

[odahcam]

Not yet.

Is it asking too much for you to create a new issue with your own problem (referencing this #1532) so we can keep this conversation there, cause I think we're spamming this issue with no resolutions for the original question. D:

Future users with mouseNav issues will not find the resolution in #1532 easy.

---

I was writing this comment earlier and I forgot to send it, so now I updated the mouseNav source code and it works with your carousel. The problem was in the dynamic loading, where the mouseNav was attaching the click listeners before the .owl-items being loaded into the carousel. Just update your plugin version: https://github.com/OwlCarousel2/OwlCarousel2/pull/1548

[eminos]

I have updated to mouseNav 1.1.0. Still doesn't work.
I would image the click listeners need to re-attach, since the carousels (both of them) are being cleared and reloaded when the user changes the size/color in the "configurator".

[odahcam]

Seems like your entire "nav" carousel is not working.

[eminos]

What do you mean it's not working?
It's got the class "owl-loaded", the items got the class "owl-item", all the owlCarousel properties for the nav carousel are read just fine, items: 5, margin: 20, mouseDrag: false...

[odahcam]

Try to drag the carousel and you will see that the dragging is not working.

[eminos]

Yes. mouseDrag: false

[eminos]

@odahcam, will you try to fix this soon? I will need this working for a project of mine. Otherwise I need to find an other solution (probably thumbnails with dotData).

As you can see here, it's not working. mouseDrag: false has of course nothing to do with it.
https://www.lintex.se/configurator-dev.html

[damirkoch]

(Sorry about the canned reply.)
I'm sorry but this is not an "issue". Please go to a site like http://stackoverflow.com/ and get help by the community.