Owlcarousel2: Carousel Navigation for Carousel

[odahcam]

Owl doesn't have and "sync with carousel $x" funcionality, while others like _Slick Slider_ (go to Slick docs and look for "Slider Syncing") have.

In hash navigation we can do something realy close to this, but it's not the same thing. Sync two carousels with event listenners is not good for the code maintenance.

If I'm making a duplicate sorry, I could not find anything like this here.

---

Possible duplicate for: this question (is the same idea in the example).

Demos/examples:

• http://vertx.com/edc-transit-sling (main)
• http://produto.mercadolivre.com.br/MLB-683457846-pen-drive-sandisk-8gb-cruzer-blade-_JM
  

  ---

  
  

  The sync plugin v1 code is here.

  
  

  The sync plugin v2 code is here.

Contribute, enjoy and don't forget to credit the source, so that more people get here and contribute even more.

[odahcam]

Code for example one:

$(window).load(function () {
    var $sync1 = $("#sync1"), //big photo
            $sync2 = $("#sync2"), //thumbs
            flag = false,
            duration = 300;

    $sync1.owlCarousel({
        items: 1,
        margin: 10,
        nav: true,
        dots: true,
    }).on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            $sync2.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });

    $sync2.owlCarousel({
        margin: 20,
        items: 3,
        center: true,
        dots: true,
        autoWidth: false,
    }).on('click', '.owl-item', function () {
        $sync1.trigger('to.owl.carousel', [$(this).index(), duration, true]);
    }).on('changed.owl.carousel', function (e) {
        if (!flag) {
            flag = true;
            $sync1.trigger('to.owl.carousel', [e.item.index, duration, true]);
            flag = false;
        }
    });
});

You can use with center:false too, but center:true is better to mark the "active" (centered) item.

---

Possible solution for: Issue #1350

[odahcam]

The sync plugin v1 code is here.

Contribute, enjoy and don't forget to credit the source, so that more people get here and contribute even more.

Source code moved to: https://github.com/odahcam/owl-carousel-sync-plugin

[daviddeutsch]

Hi @luizfilipe2557 - Thanks for sharing your solution!

I'm currently working on another solution, though - one that lets you link unlimited owl instances and that is implemented in a native plugin.

[odahcam]

Oh, hello @daviddeutsch, thanks to @eparisio we could get this in version two (https://github.com/odahcam/owlcarousel-sync-plugin/tree/version-2), we made the plugin as a "native plugin", I would be very happy if you could join us to make it better. :smile:

---

• V2.2 Plugin example 1 (jsFiddle)

[daviddeutsch]

@luizfilipe2557 There are two things that I object to in this implementation - keeping an internal index (I prefer explicitly handling bubbling to prevent endless recursion) and mixing in the indicator stuff. I understand there is a need to keep a consistent "focus" element, but in my approach, that's a separate plugin that I want to put in. Also - I'm not sure what you use the extra options for, really. Why an extra css class?

I've uploaded my solution as a gist, perhaps you'd be interested in checking that out? Would be nice to hear if you can make it work for you. It's not completely cleaned up yet, though.

[odahcam]

@daviddeutsch As you can see here, the only way of showing the user what is the "in focus" slide is to add a class on it and style in a different way from the other slides, close to what happens with the dots navigation.

I forgot that this class would be added even when the Sync is not set, so we have a Issue here.

[eparisio]

@daviddeutsch hi, there is some question about your gist, it's an interest solution but i think the it's only the starting part.
I made a new gist to show the clean solution that i develop. if you have question about some part ask without problems.
The additional class i think is optional but in some case can be necessary to add it.

I think that my actual solution cover the main aspect of this functionality, there are some other case where it will not work and i should focus on this cases.

gist

[odahcam]

@eparisio your solution fails when one carousel has more items on screen than the other. E.g.: if you have a main carousel with 1 item per slide positioned in slide 5 and a nav carousel with 3 items per slide, the nav carousel will have the .owl-linked in the slide 3. This is an error that we don't have here: https://fiddle.jshell.net/odahcam/q7jsLk93/

[daviddeutsch]

Thank you for your contributions! However - Sorry, but I think I still favour my solution. The main reason is that it's not working with other options (try setting loop to true) and I think my approach is slightly more simple.

I've opened a new issue for this, feel free to chime in there once I push the code. It would be great if we continue this as a productive discussion to perhaps find an even better solution.

[odahcam]

@daviddeutsch Try setting center to false, it's awesome that your carousel works with loop, but I found two problems:

1. center: false disables the linking
2. When you have a loop: true carousel and a loop: false carousel, when the loop: true carousel achieves the end, both go back to the start, but when in the first slide you drag left the loop: true carousel (last slide in loop), it slides to the next slide instead of previous. Demo here. (try setting rtl: true, the linking will work fine :confused:)

If you let me, I could try to contribute to your code. Besides that I think the user needs to be able to navigate by clicking in the .owl-items that are in the navigation carousel (click navigation demo here).

[daviddeutsch]

@odahcam

1. You're using the old version of the code where I didn't have a bug cleared up. It was actually the items: 1 that disabled the linking.
2. I think what you have there is the expected behavior - a non-looped carousel _should_ jump back. Perhaps I'm not really understanding your issue correctly, though.

I'd love for you to help out find and perhaps even resolve any outstanding issues - if you could contribute to the one I opened up, that'd be great!

[odahcam]

@daviddeutsch If you saw my example, with this explanation you will understand. I know it's outdated, but I'll use it for illustration purpouses.

1. Load the page, run the code in jsFiddle if necessary.
2. Using the nav carousel (on bottom), try to navigate to slide nº5 right on the left side of the slide nº1.
   2.1 The carousels will slide to slide nº2. (unexpected behavior)
   2.2 This only happens when you wait a few seconds before using the carousel, if you be quick enough when the page loads, you will see the expected behavior.
3. After 2.1, navigate right until you get the first nº1 slide on right.
4. Navigate to slide nº5 right on the left side of the present slide nº1.
   4.1 You will get the expected behavior.

Sorry if I'm making you waste your time for nothing, I just want to clearify what I said before.