Skip to content

Instantly share code, notes, and snippets.

@FabianSchmick
Last active July 26, 2017 09:37
Show Gist options
  • Save FabianSchmick/f8936a2723a642c5d98dd44c6852a2e4 to your computer and use it in GitHub Desktop.
Save FabianSchmick/f8936a2723a642c5d98dd44c6852a2e4 to your computer and use it in GitHub Desktop.
Synchronize two owlCarousel
syncCarousel();
function syncCarousel() {
var sync1 = jQuery('#sync1'),
sync2 = jQuery('#sync2'),
flag = false,
realindex = 0,
loop = true; // For loop true see workaround
sync1.owlCarousel({
loop: loop,
margin: 10,
items: 1,
center: true,
slideSpeed: 500,
nav: true,
navText: []
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
realindex = e.item.index;
if(loop) {
/* e.item.index - (e.relatedTarget._clones.length / 2) workaround because owl carousel has wrong loop index
see: https://github.com/OwlCarousel2/OwlCarousel2/issues/1203 */
realindex = e.item.index - (e.relatedTarget._clones.length / 2);
if (realindex < 0) {
realindex = e.item.count-1;
}
}
sync2.trigger('to.owl.carousel', [realindex, 500, true]);
flag = false;
}
});
sync2.owlCarousel({
loop: loop,
margin: 10,
items: 1,
center: true,
slideSpeed: 500,
nav: true,
navText: []
})
.on('changed.owl.carousel', function (e) {
if (!flag) {
flag = true;
realindex = e.item.index;
if(loop) {
realindex = e.item.index - (e.relatedTarget._clones.length / 2);
if (realindex < 0) {
realindex = e.item.count-1;
}
}
sync1.trigger('to.owl.carousel', [realindex, 500, true]);
flag = false;
}
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment