This is a plugin to sync two Owl Carousels.

See:

• OwlCarousel2/OwlCarousel2#1350
• OwlCarousel2/OwlCarousel2#1377

This function was made to supply the need to synchronize two OwlCarousels. E.g.: embed product gallery.

• Bower: $ bower install owl.carousel.sync

1. Construct your exhibition carousel and your nav carousel the way you want.
2. Use jQuery selector (or variable with the carousel Object) and plug the plugin on it, the plugin has an Object parameter.
3. In the Object parameter, put the $(selector) of the nav carousel in the key 'target' or 'syncWith'. See example below:

$('.owl-exhibition').owlSync({
    target: $('.owl-nav')
});

4. You can still pass the duration (in milliseconds) of the slide transition and the index of first slide:

$('.owl-exhibition').owlSync({
    syncWith: $('.owl-nav'),
    duration: 200, // this is an int variable that represents time in milliseconds (ms)
    startIndex: 3 // will link the carousels on the fourth slide.
});

5. Note that the sync slides will have the .linked class, that allows you to style them.

Object options has the $('.owl-nav') jQuery object and duration of slide transition. (example above)